<script lang="ts">
  export let className = '';
  export let name = '';
  export let placeholder = '';
  export let value = '';
  export let onChange: (e: Event & { currentTarget: EventTarget & HTMLTextAreaElement }) => void;
  export let error: string | undefined = undefined;

  let focus = false;
</script>

<div class="textarea {value ? 'value' : ''} {focus ? 'focus' : ''} {error ? 'error' : ''} {className}">
  <label class="textareaContainer" for={name}>
    <textarea
      id={name}
      {name}
      bind:value
      class="textareaInput"
      on:input={onChange}
      on:focusout={() => (focus = false)}
      on:focus={() => (focus = true)}
    />
    <span class="textareaPlaceholder">{placeholder}</span>
    {#if error !== undefined}
      <p class="textareaError">{error}</p>
    {/if}
  </label>
</div>

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

  .textarea {
    .textareaContainer {
      display: flex;
      position: relative;
    }

    .textareaInput {
      width: 100%;
      height: 146px;
      outline: none;
      padding: 30px 24px 5px 24px;
      border-radius: 4px;
      border: 1px solid $techBlueSecondary;
      background: $techBlue1;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      resize: none;

      @include breakpoint-down('deskS') {
        height: 85px;
      }

      &:-webkit-autofill {
        border: thin solid #d9d7cc;
      }
    }

    .textareaPlaceholder {
      display: block;
      pointer-events: none;
      position: absolute;
      top: 16px;
      left: 24px;
      right: 24px;
      transition: 0.2s cubic-bezier(0.46, 0.03, 0.52, 0.96);
      will-change: transform;
      color: $techBluePrimary;
    }

    .textareaError {
      position: absolute;
      top: -9px;
      right: 24px;
      z-index: 1;
      border-radius: 4px;
      background: $redPrimary;
      padding: 2px 8px;
      color: $techWhite;
      font-size: 10px;
      font-weight: 400;
      line-height: 14px;
    }

    &.focus {
      .textareaInput {
        border: 1px solid $techGrey;
        box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
      }
    }

    &.focus,
    &.value {
      .textareaPlaceholder {
        top: 16px;
        font-size: 10px;
        font-weight: 400;
        line-height: 14px;

        @include breakpoint-down('deskL') {
          font-size: 9px;
          line-height: 12px;
        }
      }
    }

    &.error {
      .textareaInput {
        border: 1px solid $redPrimary;
        background: $redPrimary10;
      }

      .textareaPlaceholder {
        color: $fontPrimary;
      }
    }
    &.bordered {
      .textareaInput {
        border-radius: 12px !important;
        @include breakpoint-down('deskL') {
          padding: 25px 68px 3px 24px;
          height: 93px;
        }
        @include breakpoint-down('tabM') {
          padding: 14px 68px 5px 10px;
        }
        @include breakpoint-down('tabM') {
          height: 58px;
          font-size: 12px;
          line-height: 14.4px;
        }
      }
      .textareaPlaceholder {
        @include breakpoint-down('tabM') {
          left: 12px !important;
        }
      }
      &.focus,
      &.value {
        @include breakpoint-down('tabL') {
          left: 12px !important;
        }
        .textareaPlaceholder {
          @include breakpoint-down('tabL') {
            top: 8px;
          }
          @include breakpoint-down('tabM') {
            top: 5px;
          }
        }
      }
    }
  }
  .textareaOnce {
    .textareaInput{
      border-radius: 12px;
      padding: 24px 12px 6px;
      font-size: 18px;
      line-height: 25.2px;
      height: 93px;
      @include breakpoint-down('deskS') {
        font-size: 16px;
        line-height: 19.49px;
        height: 87px;
      }
      @include breakpoint-down('tabM') {
        height: 58px;
        font-size: 12px;
        line-height: 14.4px;
        padding: 12px;
        padding-top: 24px;
        padding-bottom: 6px;
      }
    }
    .textareaPlaceholder {
      @include breakpoint-down('tabM') {
        left: 12px;
      }
    }

  }
</style>