<template>
  <div
    class="kyriad-signature"
    :class="[`kyriad-signature--${getItemValue('template')}`]"
  >
    <div class="kyriad-signature__infos">
      <span class="kyriad-signature__infos__border">
        <span />
      </span>

      <div class="kyriad-signature__infos__container df-center-y">
        <div>
          <p v-if="getItemValue('fullname')" class="kyriad-signature__fullname">
            {{ getItemValue('fullname') }}
          </p>

          <p v-if="getItemValue('function')" class="kyriad-signature__function">
            {{ getItemValue('function') }}
          </p>

          <p v-if="getItemValue('email')" class="kyriad-signature__email">
            {{ getItemValue('email') }}
          </p>

          <p v-if="getItemValue('phone')" class="kyriad-signature__phone">
            Tel. : {{ getItemValue('phone') }}
          </p>

          <p
            v-if="getItemValue('cellphone')"
            class="kyriad-signature__cellphone"
          >
            {{ $_tr('customs.SIGNATURES.mobile') }}
            {{ getItemValue('cellphone') }}
          </p>

          <p v-if="getItemValue('address')" class="kyriad-signature__address">
            <span>{{ getItemValue('hotel') }}</span>
            <br />
            {{ getItemValue('address') }}
          </p>

          <p class="kyriad-signature__environment">
            {{ $_tr('customs.SIGNATURES.environment') }}
          </p>
        </div>

        <p class="kyriad-signature__url">
          <span>KYRIAD.COM</span>
        </p>
      </div>
    </div>

    <div class="kyriad-signature__illustration df-center-xy">
      <img
        v-if="getItemValue('template') === 'a'"
        :src="illustrationUrl"
      />
      <img
        v-else-if="getItemValue('template') === 'b'"
        :src="illustrationUrl"
      />
      <img
        v-else
        :src="illustrationUrl"
      />
    </div>

    <div class="kyriad-signature__logo">
      <img
        src="../../../../../assets/img/brand-forms/signature/kyriad/logo.svg"
      />
    </div>
  </div>
</template>

<script>
const signatureIllustrations = import.meta.glob(
  '../../../../../assets/img/brand-forms/signature/kyriad/*/*.png',
  { eager: true, import: 'default' }
)

import templateMixin from '../../../mixins/template-mixin'

export default {
  name: 'signature-template',
  mixins: [templateMixin],
  computed: {
  illustrationUrl() {
    const lang = this.$_currentLang
    const template = this.getItemValue('template') || 'c'
    const path = `../../../../../assets/img/brand-forms/signature/kyriad/${lang}/${template}.png`

    return signatureIllustrations[path] || ''
  }
}
}
</script>

<style scoped lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;
@use '../../../brands-utils/kyriad' as *;
@use '../../../utils/cut-line' as *;

$currentScale: 1.5;

.kyriad-signature {
  display: flex;
  align-items: stretch;

  &__infos {
    display: flex;
    align-items: center;

    &__container {
      position: relative;
      height: scale(140px, $currentScale);
      padding: scale(5px, $currentScale) scale(28px, $currentScale)
        scale(5px, $currentScale) scale(12px, $currentScale);

      > div:first-child {
        max-width: 255px;
      }
    }

    &__border {
      position: relative;
      width: scale(30px, $currentScale);
      height: scale(80px, $currentScale);

      &::before,
      &::after {
        position: absolute;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        content: '';
      }

      &::before {
        top: 0;
        border-width: 0 0 scale(30px, $currentScale) scale(30px, $currentScale);
        transform: translateY(-100%);
      }

      &::after {
        bottom: 0;
        border-width: 0 scale(30px, $currentScale) scale(30px, $currentScale) 0;
        transform: translateY(100%);
      }

      span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: scale(12px, $currentScale);
        height: scale(12px, $currentScale);
        border-radius: 100%;
        background: var(--color-light);
        transform: translate(-50%, -50%);
      }
    }
  }

  &__illustration {
    width: scale(116px, $currentScale);

    img {
      width: scale(108px, $currentScale);
    }
  }

  &--a {
    .kyriad-signature__infos {
      > * {
        background: #6cb2dd;
      }

      &__border {
        &::before {
          border-color: transparent transparent #6cb2dd transparent;
        }

        &::after {
          border-color: transparent #6cb2dd transparent transparent;
        }
      }
    }
  }

  &--b {
    .kyriad-signature__infos {
      > * {
        background: #78c3d2;
      }

      &__border {
        &::before {
          border-color: transparent transparent #78c3d2 transparent;
        }

        &::after {
          border-color: transparent #78c3d2 transparent transparent;
        }
      }
    }
  }

  &--c {
    .kyriad-signature__infos {
      > * {
        background: #809cbd;
      }

      &__border {
        &::before {
          border-color: transparent transparent #809cbd transparent;
        }

        &::after {
          border-color: transparent #809cbd transparent transparent;
        }
      }
    }
  }

  &__logo {
    padding: scale(20px, $currentScale) scale(11px, $currentScale)
      scale(5px, $currentScale) scale(16px, $currentScale);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    background: #31434b;

    img {
      width: scale(33px, $currentScale);
    }
  }

  &__fullname {
    text-transform: uppercase;
    font-family: 'Knockout-28JuniorFeathrwt', serif;

    @include fontSize(scale(13, $currentScale));
  }

  &__function {
    margin-bottom: scale(5px, $currentScale);
    font-family: 'Knockout-51Middleweight', serif;

    @include fontSize(scale(9, $currentScale));
  }

  &__email,
  &__phone,
  &__cellphone,
  &__address {
    font-family: 'Knockout-31JuniorMiddlewt', serif;

    @include fontSize(scale(9, $currentScale));
  }

  &__address {
    margin: scale(5px, $currentScale) 0;

    span {
      font-weight: var(--font-weight-bold);
    }
  }

  &__environment {
    font-family: 'Knockout-28JuniorFeathrwt', serif;

    @include fontSize(scale(7, $currentScale));
  }

  &__url {
    position: absolute;
    top: calc(50% - 20px);
    right: scale(-20px, $currentScale);
    letter-spacing: 0.12em;
    font-family: 'Knockout-51Middleweight', serif;
    transform: translateY(-50%);
    transform-origin: center center;

    @include fontSize(scale(10, $currentScale));

    span {
      display: block;
      transform: rotate(-90deg);
    }
  }
}
</style>
