<script lang="ts">
  import { slide } from 'svelte/transition'
  import { createEventDispatcher } from 'svelte'

  const dispatch = createEventDispatcher()

  export let err: string = ''
  export let value: string | number = ''
  export let min: number = 1
  export let max: number = -1
  export let step: number = 1
  export let sty: 'frame' | 'block' = 'frame'
  export let size: 'normal' | 'large' = 'large'
  export let disabled: boolean = false

  const handleChange = () => {
    const val = Number(value)
    if (isNaN(val)) {
      value = String(min)
    } else if (val < min) {
      value = String(min)
    } else if (max > 0 && val > max) {
      value = String(max)
    } else {
      value = String(val)
    }
    dispatch('change', { value })
  }

  const increment = () => {
    const val = Number(value)
    if (isNaN(val)) {
      value = String(min)
    } else if (max > 0 && val + step > max) {
      value = String(max)
    } else {
      value = String(val + step)
    }
  }

  const decrement = () => {
    const val = Number(value)
    if (isNaN(val)) {
      value = String(min)
    } else if (val - step < min) {
      value = String(min)
    } else {
      value = String(val - step)
    }
  }
</script>

<div class="relative w-full">
  <input
    class={`w-full rounded-lg h-10 pl-4 pr-8 text-gry-900 ${
      err
        ? ' border-2 outline-alert-600 border-alert-600'
        : 'focus:border-prm-600 focus:outline-prm-600 border-gryl-200'
    } ${
      size === 'normal' ? 'h-8' : 'h-10'
    } ${
      sty === 'block' ? 'bg-gryl-100' : 'border border-gryl-200 placeholder-gry-300'
    }`}
    type="text"
    bind:value
    on:change={handleChange}
    disabled={disabled}
  />

  <div class={`absolute flex flex-col items-center justify-center w-5 top-1 bottom-1 right-2`}>
    <button
      disabled={Number(value) >= max && max > 0 || disabled}
      class={`flex items-center w-3 transition text-gry-300 hover:text-gray-900 disabled:text-gry-200 disabled:hover:text-gry-200`}
      on:click={increment}
    >
      <svg width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
        ><g fill="currentColor"
          ><path
            d="M11.91,10.213l-3.5-5a.52.52,0,0,0-.82,0l-3.5,5A.5.5,0,0,0,4.5,11h7a.5.5,0,0,0,.41-.787Z"
          /></g
        ></svg
      >
    </button>
    <button
      class="flex items-center w-3 transition text-gry-300 hover:text-gray-900 disabled:text-gry-200 disabled:hover:text-gry-200"
      on:click={decrement}
      disabled={Number(value) <= min || disabled}
    >
      <svg width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
        ><g fill="currentColor"
          ><path
            d="M11.943,5.269A.5.5,0,0,0,11.5,5h-7a.5.5,0,0,0-.409.787l3.5,5a.5.5,0,0,0,.818,0l3.5-5A.5.5,0,0,0,11.943,5.269Z"
          /></g
        ></svg
      >
    </button>
  </div>
</div>
{#if err}
  <div transition:slide class="mt-0.5 px-[17px] text-alert-600 text-xs">
    {err}
  </div>
{/if}
