<template>
  <div class="form-toggle">
    <typo-text variant="title-bold">Form Textarea</typo-text>
    <hr class="my-3" />
    <div>
      <div class="pt-1">
        <typo-text variant="body-1-bold">
          <span class="text-capitalize">Form Type</span>
        </typo-text>
        <typo-text variant="caption-bold">Properties</typo-text>
        <div class="flex flex-wrap mb-1">
          <div class="wrap-input w-full">
            <pre>{{`cols: {
  type: [Number],
  default: 1
},
rows: {
  type: [Number],
  default: 1
},
placeholder: {
  type: [String],
  default: "Your text input here",
},
message: {
  type: [String],
  default: "",
},
maxLength: {
  type: [String, Number],
  default: ""
},
textAlign: {
  type: [String],
  default: "left",
  validator: function (value) {
    return ["left", "right"].indexOf(value) !== -1;
  },
},
modelValue: {
  type: [String, Number, Array, Object],
},
labelPosition: {
  type: [String],
  validator: function (value) {
    return ["left", "top"].indexOf(value) !== -1;
  },
},
readonly: {
  type: [Boolean],
  default: false,
},
disabled: {
  type: [Boolean],
  default: false,
},
error: {
  type: [Boolean],
  default: false,
},
noResize: {
  type: [Boolean],
  default: false,
},`}}
            </pre>
          </div>
        </div>

        <div v-for="(item, index) in listForm" :key="index">
          <typo-text variant="caption-bold">{{ item.typeName }}</typo-text>
          <div class="flex flex-wrap mb-1">
            <div
              class="wrap-input"
              v-for="(attrItem, attrIndex) in item.attrInput"
              :key="attrIndex"
            >
              <form-textarea
                :placeholder="attrItem.placeholder"
                :message="attrItem.message"
                :disabled="attrItem.disabled"
                :error="attrItem.error"
                :textAlign="attrItem.textAlign"
                v-model="form.name"
                :labelPosition="attrItem.labelPosition"
                :cols="attrItem.cols"
                :rows="attrItem.rows"
                :noResize="attrItem.noResize"
              >
                <template v-slot:label v-if="attrItem.labelText">
                  <typo-text variant="body-2-bold">
                    {{ attrItem.labelText }}
                  </typo-text>
                </template>
              </form-textarea>
              <div class="text-center">
                <typo-text variant="caption-regular">
                  {{ attrItem.attrName }}
                </typo-text>
              </div>
              <pre class="my-0">
                {{ attrItem.code }}
              </pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TypoText from "@/components/Typography/TypoText";
import FormTextarea from "@/components/Form/FormTextarea";

export default {
  components: {
    TypoText,
    FormTextarea,
  },
  data() {
    return {
      form: {
        name: "",
      },
      listForm: [
        {
          typeName: "Regular Form",
          attrInput: [
            {
              placeholder: "Placeholder Text",
              rows: 5,
              attrName: "Default",
              code: `
<form-textarea 
  rows="5"
  placeholder="Placeholder Text"
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              rows: 5,
              disabled: true,
              attrName: "Disabled",
              code: `
<form-textarea
  rows="5"
  disabled
  placeholder="Placeholder Text"
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              rows: 5,
              message: "Helper Text",
              attrName: "With Guide",
              code: `
<form-textarea
  rows="5"
  placeholder="Placeholder Text"
  message="Helper Text"
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              rows: 5,
              message: "Helper Text",
              error: true,
              attrName: "Error",
              code: `
<form-textarea
  rows="5"
  placeholder="Placeholder Text"
  error
  message="Helper Text"
  v-model="data"
/>`,
            },
          ],
        },
        {
          typeName: "Regular Form - Text Align Right",
          attrInput: [
            {
              placeholder: "Placeholder Text",
              rows: 5,
              attrName: "Default",
              textAlign: "right",
              code: `
<form-textarea 
  rows="5"
  placeholder="0"
  textAlign="right"
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              rows: 5,
              disabled: true,
              attrName: "Disabled",
              textAlign: "right",
              code: `
<form-textarea 
  rows="5"
  placeholder="0"
  textAlign="right"
  disabled
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              rows: 5,
              message: "Helper Text",
              attrName: "With Guide",
              textAlign: "right",
              code: `
<form-textarea 
  rows="5"
  placeholder="0"
  textAlign="right"
  message="Helper Text"
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              rows: 5,
              message: "Helper Text",
              error: true,
              attrName: "Error",
              textAlign: "right",
              code: `
<form-textarea 
  rows="5"
  placeholder="0"
  textAlign="right"
  message="Helper Text"
  error
  v-model="data"
/>`,
            },
          ],
        },
        {
          typeName: "With Label Position",
          attrInput: [
            {
              placeholder: "Placeholder Text",
              rows: 5,
              attrName: "Label on Left",
              labelText: "Label",
              labelPosition: "left",
              code: `
<form-textarea
  rows="5"
  :placeholder="Placeholder Text"
  v-model="data"
  labelPosition="left"
>
  <template v-slot:label>
    <typo-text variant="body-2-bold">
      Label
    </typo-text>
  </template>
</form-textarea>`,
            },
            {
              placeholder: "Placeholder Text",
              rows: 5,
              attrName: "Label on Top",
              labelText: "Label",
              labelPosition: "top",
              code: `
<form-textarea
  rows="5"
  :placeholder="Placeholder Text"
  v-model="data"
  labelPosition="top"
>
  <template v-slot:label>
    <typo-text variant="body-2-bold">
      Label
    </typo-text>
  </template>
</form-textarea>`,
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss">
@use "@/assets/style/_color.scss" as *;

.form-toggle {
  .caption-bold {
    color: $neutral-4;
  }

  .wrap-input {
    background: $neutral-1;
    padding: 28px;
    width: calc(100% / 3 - 60px);
    margin-top: 4px;
    margin-right: 2px;
    margin-left: 2px;
    .caption-regular {
      color: $neutral-4;
    }
  }

  .w-full {
    width: 100%;
  }
}
</style>
