<template>
  <div class="page-form-input-tag">
    <typo-text variant="title-bold">
      Form Input Tag
    </typo-text>
    <hr class="my-3" />
    <div>
      <div class="pt-1">
        <typo-text variant="caption-bold">Properties</typo-text>
        <div class="flex flex-wrap mb-1">
          <div class="wrap-input w-full" style="width: 100%;">
            <pre>
{{`
placeholder: {
  type: [String],
  default: "",
},
modelValue: {
  type: [String],
},
maxLength: {
  type: [String, Number],
  default: ""
},
minLength: {
  type: [String, Number],
  default: ""
},
disabled: {
  type: [Boolean],
  default: false
},
readonly: {
  type: [Boolean],
  default: false,
},
borderRadius: {
  type: [String, Number],
  default: 6
},
error: {
  type: [Boolean],
  default: false,
},
message: {
  type: [String],
  default: "",
},
labelPosition: {
  type: [String],
  validator: function (value) {
    return ["left", "top"].indexOf(value) !== -1;
  },
},
npwp: {
  type: Boolean,
  default: false,
},
separator: {
  type: [Array],
}`}}
            </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-input-tag 
                v-model="valueTag" 
                :borderRadius="attrItem.borderRadius"
                :placeholder="attrItem.placeholder"
                :maxLength="maxLength"
                :minLength="minLength"
                :message="attrItem.message"
                :disabled="attrItem.disabled"
                :error="attrItem.error"
                :labelPosition="attrItem.labelPosition"
                :npwp="attrItem.npwp"
                :separator="[',', ' ', 'Enter']"
              >
                <template v-slot:label v-if="attrItem.labelText">
                  <typo-text variant="body-2-bold">
                    {{ attrItem.labelText }}
                  </typo-text>
                </template>
              </form-input-tag>
              <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 FormInputTag from "@/components/Form/FormInputTag";

export default {
  components: {
    TypoText,
    FormInputTag
  },
  data() {
    return {
      valueTag: [],
      listForm: [
        {
          typeName: "Regular Form",
          attrInput: [
            {
              placeholder: "Placeholder Text",
              attrName: "Default",
              code: `
<form-input-tag 
  placeholder="Placeholder Text"
  v-model="data"
  @handleRemove="handleRemove"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              disabled: true,
              attrName: "Disabled",
              code: `
<form-input-tag
  disabled
  placeholder="Placeholder Text"
  v-model="data"
  @handleRemove="handleRemove"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              message: "Helper Text",
              attrName: "With Guide",
              code: `
<form-input-tag
  placeholder="Placeholder Text"
  message="Helper Text"
  v-model="data"
  @handleRemove="handleRemove"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              message: "Helper Text",
              error: true,
              attrName: "Error",
              code: `
<form-input-tag
  placeholder="Placeholder Text"
  error
  message="Helper Text"
  v-model="data"
  @handleRemove="handleRemove"
/>`,
            },
          ]
        },
        {
          typeName: "With Label Position",
          attrInput: [
            {
              placeholder: "Placeholder Text",
              attrName: "Label on Left",
              labelText: "Label",
              labelPosition: "left",
              code: `
<form-input-tag
  :placeholder="Placeholder Text"
  v-model="data"
  labelPosition="left"
  @handleRemove="handleRemove"
>
  <template v-slot:label>
    <typo-text variant="body-2-bold">
      Label
    </typo-text>
  </template>
</form-input-tag>`,
            },
            {
              placeholder: "Placeholder Text",
              attrName: "Label on Top",
              labelText: "Label",
              labelPosition: "top",
              code: `
<form-input-tag
  :placeholder="Placeholder Text"
  v-model="data"
  labelPosition="top"
  @handleRemove="handleRemove"
>
  <template v-slot:label>
    <typo-text variant="body-2-bold">
      Label
    </typo-text>
  </template>
</form-input-tag>`,
            },
          ]
        },
        {
          typeName: "With format NPWP",
          attrInput: [
            {
              placeholder: "Placeholder Text",
              attrName: "Format NPWP",
              code: `
<form-input-tag
  :placeholder="Placeholder Text"
  v-model="data"
  npwp
  @handleRemove="handleRemove"
/>`,
              npwp: true
            },
          ]
        }
      ]
    }
  },
}
</script>

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

.page-form-input-tag {
  .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;
    }
  }
}
</style>