<script setup lang="ts">
import { computed, PropType } from 'vue'
import { FormType } from '../../types/Form/Form.types'

const props = defineProps({
  /**
   * 値
   * @example 'テスト', 100
   */
  modelValue: { type: String },
  /**
   * rows
   * @example '20'
   */
  rows: { type: String, default: '10' },
  /**
   * デザイン
   * @example 'outline'
   */
  design: { type: String as PropType<FormType>, default: 'outline' },
  /**
   * ディセーブル
   * @example disable => true
   */
  disabled: { type: Boolean, default: false },
  /**
   * ラベル
   * @example 'お名前'
   */
  label: { type: String, default: '' },
  /**
   * プレースホルダー
   * @example 'お名前'
   */
  placeholder: { type: String, default: '' },
  /**
   * 必須テキスト
   * @example '*' | '*必須'
   */
  requiredText: { type: String as PropType<'※' | '※必須'>, default: '' },
  /**
   * 必須アイコン
   * @example true
   */
  requiredIcon: { type: Boolean, default: false },
  /**
   * エラー1
   * @example true
   */
  error1: { type: Boolean, default: false },
  /**
   * エラー2
   * @example true
   */
  error2: { type: Boolean, default: false },
  /**
   * エラー3
   * @example '****を入力してください'
   */
  error3: { type: String, default: '' },
  /**
   * エラー4
   * @example '****を入力してください'
   */
  error4: { type: String, default: '' },
})

const emit = defineEmits<{
  (e: 'update:modelValue', val: string | undefined): void
  (e: 'onBlur'): void
  (e: 'onFocus'): void
}>()

const model = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value)
  },
})
const onBlur = () => {
  emit('onBlur')
}
const onFocus = () => {
  emit('onFocus')
}
</script>

<template>
  <div class="_box">
    <div class="_label_container">
      <div class="_label">{{ label }}</div>
      <div
        v-show="requiredText"
        class="_required_text"
        :class="{ _required_position_right: label }"
      >
        {{ requiredText }}
      </div>
      <div
        v-show="requiredIcon"
        class="_required_icon_container"
        :class="{ _required_position_right: label }"
      >
        <div class="_required_icon">必須</div>
      </div>
    </div>

    <textarea
      v-model="model"
      :rows="rows"
      :disabled="disabled"
      :placeholder="placeholder"
      :class="{
        _outline: props.design === 'outline',
        _shadow: props.design === 'shadow',
        _square: props.design === 'square',
        _disabled: props.disabled,
        _error_border_common:
          props.design !== 'shadow' &&
          (props.error1 || props.error2 || props.error3 || props.error4),
        _error_bg_common: props.error2 || props.error4,
      }"
      class="_textarea"
      @blur="onBlur()"
      @focus="onFocus()"
    />

    <div v-show="props.error3" class="_error_message_common">
      {{ props.error3 }}
    </div>

    <div v-show="props.error4" class="_error_message_common">
      {{ props.error4 }}
    </div>
  </div>
</template>

<style lang="sass" scoped>
._box
  font-family: 'Roboto', sans-serif
  width: 100%
  box-sizing: border-box

._label_container
  display: flex
  align-items: center
  padding: 0 5px
  margin-bottom: 2px
  line-height: 24px

._label
  font-size: 16px
  color: #707070
  width: fit-content

._required_text
  font-size: 14px
  color: #D20000

._required_position_right
  margin-left: auto

._required_icon_container
  height: 24px
  display: flex
  align-items: center

._required_icon
  font-size: 14px
  background: #D20000
  color: #fff
  line-height: 22px
  padding: 0 5px
  border-radius: 5px

._textarea
  padding: 10px 15px
  border: none
  font-size: 16px
  box-sizing: border-box

._outline
  outline: none
  border-radius: 5px
  width: 100%
  border: solid 1px var(--c-primary)

._shadow
  outline: none
  border-radius: 5px
  box-shadow: rgba(99, 99, 99, 0.2) 0px 0px 8px 1px
  -webkit-appearance: none
  appearance: none
  width: 100%

._square
  outline: none
  border-radius: 0px
  width: 100%
  border: solid 1px var(--c-primary)

._disabled
  background: #ECECEC
  cursor: not-allowed

._error_message_common
  color: #D20000
  font-size: 16px

._error_border_common
  border: solid 1px #D20000

._error_bg_common
  background: rgba(210,0,0,0.2)
</style>
