<template>
  <FormWrapper class="area-input" :class="states" :label="label" :error="error">
    <div class="area-input">
        <textarea
            class="h600"
            :placeholder="placeholder"
            :disabled="disabled"
            @input="changeHandler"
            :value="modelValue"
        ></textarea>
    </div>
  </FormWrapper>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import FormWrapper from "../FormWrapper.vue";
import FormMixin from "@/mixins/FormMixin";
export default defineComponent({
    mixins: [FormMixin],
    emits: ['update:modelValue'],
    props: {
        disabled: {
            default: false,
            type: Boolean,
        },
        modelValue: {
            type: [String],
            required: true
        }
    },
    components: {
        FormWrapper
    },
    setup({ disabled }, { emit }) {
        const  changeHandler = (event: any): void => {
            emit("update:modelValue", event.target.value);
        };

        return {
            changeHandler,
            disabled,
        };
    },
});
</script>

<style scoped lang="scss">
.area-input {
  --height: 160px;

  textarea {
    background-color: var(--background);
    border: 1px solid var(--border-color);
    padding: var(--form-side-padding);
    border-radius: var(--form-border-radius);
    height: var(--height);
    transition: border 0.3s ease;
    width: 100%;

    &::placeholder {
      color: var(--form-placeholder-color);
    }

    &:focus {
      border-color: var(--form-border-color-focus);
    }
  }
}
</style>