<script lang="ts">
  import successIcon from '../../../assets/icons/message-success.svg';
  import errorIcon from '../../../assets/icons/message-error.svg';
  import { t } from '$lib/translations';

  export let error = false;
  export let icon: null | string = null;
  export let title: string | null = null;
  export let text: string | undefined;
  export let className: string = '';
  export let onClick: () => void;

  if(className.indexOf('formMessageOnce') !== -1) {
    setTimeout(() => onClick(), 5000);
  }
</script>

<div class="form-message {className}">
  <div class="form-message__content">
    {#if icon}
      <img src="{icon}" alt="form message icon">
    {:else}
      <img src={error ? errorIcon : successIcon} alt="" class="form-message__icon" />
    {/if}
    <p class="form-message__title">
      {#if title}
        {title}
      {:else}
        {#if error}
          {@html $t('Something went wrong...')}
        {:else}
          {@html $t('Your message has been successfully sent')}
        {/if}
      {/if}
    </p>
    <p class="form-message__text">
      {#if text !== undefined}
        {text}
      {/if}
    </p>
    <div class="form-message__button" on:click={onClick} on:keydown={() => false} role="button" tabindex="0">
      {#if error}
        {$t('Please try again')}
      {:else}
        {$t('ok')}
      {/if}
    </div>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/media';
  @import 'src/scss/mixins';
  @import 'src/scss/variables';

  .form-message {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: $techWhite;
    border-radius: 16px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;

    &__content {
      min-height: 343px;
      width: 57%;
      max-width: 317px;

      display: flex;
      flex-direction: column;
    }

    &__icon {
      max-width: 75px;
      margin-inline: auto;
      margin-bottom: 16px;
    }

    &__title {
      @include titleM;

      margin-bottom: 16px;
      text-align: center;
    }

    &__text {
      @include smallDefault;

      margin-bottom: 64px;
      flex: 1;
      text-align: center;
    }

    &__button {
      @include baseCTA;

      text-align: center;
      border-radius: 40px;
      background: $techGrey;
      color: $techWhite;
      padding: 16px 50px;
      cursor: pointer;
    }
  }
  .formMessageOnce {
    .form-message__title, .form-message__text {
      font-weight: 700;
      font-size: 24px;
      line-height: 26.4px;
      @include breakpoint-down('tabL') {
        font-size: 18px;
        line-height: 19.8px;
      }
      @include breakpoint-down('tabM') {
        font-size: 14px;
        line-height: 15.4px;
      }
    }
    .form-message__button {
      display: none;
    }
    .form-message__title {
      font-size: 24px;
      line-height: 26.4px;
      margin-bottom: 28px;
      @include breakpoint-down('tabL') {
        font-size: 18px;
        line-height: 19.8px;
        margin-bottom: 19px;
      }
      @include breakpoint-down('tabM') {
        font-size: 14px;
        line-height: 15.4px;
        margin-bottom: 15px;
      }
    }
    .form-message__text {
      margin-bottom: 0;
      flex: none;
    }
    .form-message__content {

      align-items: center;
      justify-content: center;
    }
    img {
      margin-bottom: 32px;

      width: 72px;
      height: 72px;
      @include breakpoint-down('tabL') {
        width: 49px;
        height: 49px;
        margin-bottom: 23px;
      }
      @include breakpoint-down('tabM') {
        width: 38px;
        height: 38px;
        margin-bottom: 16px;
      }
    }
  }
</style>