<template>
  <div class="form-toggle">
    <typo-text variant="title-bold">Form Input</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>
{{`
placeholder: {
  type: [String],
  default: "Your text input here",
},
placeholder: {
  type: [Boolean],
  default: false,
},
placeholder: {
  type: [Boolean],
  default: false,
},
message: {
  type: [String],
  default: "",
},
maxLength: {
  type: [String, Number],
  default: ""
},
minLength: {
  type: [String, Number],
  default: ""
},
textAlign: {
  type: [String],
  default: "left"
},
type: {
  type: [String],
  default: "text"
},
slotLeft: {
  type: [String],
  default: "",
},
slotRight: {
  type: [String],
  default: "",
},
iconLeft: {
  type: [String],
  default: "",
},
iconRight: {
  type: [String],
  default: "",
},
modelValue: {
  type: [String, Number, Array, Object],
},
labelPosition: {
  type: [String],
},
readonly: {
  type: [Boolean],
  default: false,
},
currency: {
  type: [Boolean],
  default: false
},
prefix: {
  type: [String],
  default: "Rp",
},
decimal: {
  type: [Boolean],
  default: false
},
disabled: {
  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-input
                :placeholder="attrItem.placeholder"
                :message="attrItem.message"
                :disabled="attrItem.disabled"
                :error="attrItem.error"
                :textAlign="attrItem.textAlign"
                :slotLeft="attrItem.slotLeft"
                :slotRight="attrItem.slotRight"
                :btnOnInput="attrItem.btnOnInput"
                :iconLeft="attrItem.iconLeft"
                :iconRight="attrItem.iconRight"
                :type="attrItem.type"
                v-model="form[attrItem.model]"
                :labelPosition="attrItem.labelPosition"
                :currency="attrItem.currency"
                :prefix="attrItem.prefix"
                :decimal="attrItem.decimal"
                :tag="attrItem.tag"
                @actionBtnOnInput="actionBtnOnInput"
              >
                <template v-slot:label v-if="attrItem.labelText">
                  <typo-text variant="body-2-bold">
                    {{ attrItem.labelText }}
                  </typo-text>
                </template>
              </form-input>
              <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>
          <typo-text variant="caption-bold">Mask Form</typo-text>
          <div class="flex flex-wrap mb-1">
            <div class="wrap-input">
              <form-input
                mask="##.###.###.#-###.###"
                v-model="maskValue"
              >
              </form-input>
              <div class="text-center">
                <typo-text variant="caption-regular">
                  Default
                </typo-text>
              </div>
              <pre class="my-0">
{{ `<form-input 
  mask="##.###.###.#-###.###"
  placeholder="Placeholder Text"
  v-model="data"
/>` }}
              </pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: {
    TypoText,
    FormInput,
  },
  methods: {
    actionBtnOnInput(){
      alert("Button Clicked")
    }
  },
  data() {
    return {
      maskValue: "",
      form: {
        name: "",
        currency: "",
        currencyDecimal: "",
        decimal: ""
      },
      listForm: [
        {
          typeName: "Regular Form",
          attrInput: [
            {
              placeholder: "Placeholder Text",
              attrName: "Default",
              model: "name",
              code: `
<form-input 
  placeholder="Placeholder Text"
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              disabled: true,
              attrName: "Disabled",
              model: "name",
              code: `
<form-input
  disabled
  placeholder="Placeholder Text"
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              message: "Helper Text",
              attrName: "With Guide",
              model: "name",
              code: `
<form-input
  placeholder="Placeholder Text"
  message="Helper Text"
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              message: "Helper Text",
              error: true,
              attrName: "Error",
              model: "name",
              code: `
<form-input
  placeholder="Placeholder Text"
  error
  message="Helper Text"
  v-model="data"
/>`,
            },
          ],
        },
        {
          typeName: "With Satuan Right - Text Align Right",
          attrInput: [
            {
              placeholder: "0",
              attrName: "Default",
              textAlign: "right",
              slotLeft: "Rp",
              type: "number",
              model: "name",
              code: `
<form-input 
  placeholder="0"
  textAlign="right"
  slotLeft="Rp"
  type="Number"
  v-model="data"
/>`,
            },
            {
              placeholder: "0",
              disabled: true,
              attrName: "Disabled",
              textAlign: "right",
              slotLeft: "Rp",
              type: "number",
              model: "name",
              code: `
<form-input 
  placeholder="0"
  textAlign="right"
  slotLeft="Rp"
  type="Number"
  disabled
  v-model="data"
/>`,
            },
            {
              placeholder: "0",
              message: "Helper Text",
              attrName: "With Guide",
              textAlign: "right",
              slotLeft: "Rp",
              type: "number",
              model: "name",
              code: `
<form-input 
  placeholder="0"
  textAlign="right"
  slotLeft="Rp"
  type="Number"
  message="Helper Text"
  v-model="data"
/>`,
            },
            {
              placeholder: "0",
              message: "Helper Text",
              error: true,
              attrName: "Error",
              textAlign: "right",
              slotLeft: "Rp",
              type: "number",
              model: "name",
              model: "name",
              code: `
<form-input 
  placeholder="0"
  textAlign="right"
  slotLeft="Rp"
  type="Number"
  error
  message="Helper Text"
  v-model="data"
/>`,
            },
          ],
        },
        {
          typeName: "With Satuan Right - Text Align Left",
          attrInput: [
            {
              placeholder: "input website",
              attrName: "Default",
              slotLeft: "http://",
              model: "name",
              code: `
<form-input 
  placeholder="input website"
  slotLeft="http://"
  v-model="data"
/>`,
            },
            {
              placeholder: "input website",
              disabled: true,
              attrName: "Disabled",
              slotLeft: "http://",
              model: "name",
              code: `
<form-input 
  placeholder="input website"
  slotLeft="http://"
  disabled
  v-model="data"
/>`,
            },
            {
              placeholder: "input website",
              message: "Helper Text",
              attrName: "With Guide",
              slotLeft: "http://",
              model: "name",
              code: `
<form-input 
  placeholder="input website"
  slotLeft="http://"
  message="Helper Text"
  v-model="data"
/>`,
            },
            {
              placeholder: "input website",
              message: "Helper Text",
              error: true,
              attrName: "Error",
              slotLeft: "http://",
              model: "name",
              code: `
<form-input 
  placeholder="input website"
  slotLeft="http://"
  error
  message="Helper Text"
  v-model="data"
/>`,
            },
          ],
        },
        {
          typeName: "With Satuan Right - Text Align Right",
          attrInput: [
            {
              placeholder: "0",
              attrName: "Default",
              textAlign: "right",
              slotRight: "%",
              type: "number",
              model: "name",
              code: `
<form-input 
  placeholder="0"
  slotRight="%"
  type="Number"
  textAlign="right"
  v-model="data"
/>`,
            },
            {
              placeholder: "0",
              disabled: true,
              attrName: "Disabled",
              textAlign: "right",
              slotRight: "%",
              type: "number",
              model: "name",
              code: `
<form-input 
  placeholder="0"
  slotRight="%"
  type="Number"
  disabled
  textAlign="right"
  v-model="data"
/>`,
            },
            {
              placeholder: "0",
              message: "Helper Text",
              attrName: "With Guide",
              textAlign: "right",
              slotRight: "%",
              type: "number",
              model: "name",
              code: `
<form-input 
  placeholder="0"
  slotRight="%"
  type="Number"
  textAlign="right"
  message="Helper Text"
  v-model="data"
/>`,
            },
            {
              placeholder: "0",
              message: "Helper Text",
              error: true,
              attrName: "Error",
              textAlign: "right",
              slotRight: "%",
              type: "number",
              model: "name",
              code: `
<form-input 
  placeholder="0"
  slotRight="%"
  type="Number"
  textAlign="right"
  error
  message="Helper Text"
  v-model="data"
/>`,
            },
          ],
        },
        {
          typeName: "Regular Form - Text Align Right",
          attrInput: [
            {
              placeholder: "0",
              attrName: "Default",
              textAlign: "right",
              model: "name",
              code: `
<form-input 
  placeholder="0"
  textAlign="right"
  v-model="data"
/>`,
            },
            {
              placeholder: "0",
              disabled: true,
              attrName: "Disabled",
              textAlign: "right",
              model: "name",
              code: `
<form-input 
  placeholder="0"
  textAlign="right"
  disabled
  v-model="data"
/>`,
            },
            {
              placeholder: "0",
              message: "Helper Text",
              attrName: "With Guide",
              textAlign: "right",
              model: "name",
              code: `
<form-input 
  placeholder="0"
  textAlign="right"
  message="Helper Text"
  v-model="data"
/>`,
            },
            {
              placeholder: "0",
              message: "Helper Text",
              error: true,
              attrName: "Error",
              textAlign: "right",
              model: "name",
              code: `
<form-input 
  placeholder="0"
  textAlign="right"
  message="Helper Text"
  error
  v-model="data"
/>`,
            },
          ],
        },
        {
          typeName: "With Icon Left",
          attrInput: [
            {
              placeholder: "Placeholder Text",
              attrName: "Default",
              iconLeft: "search",
              model: "name",
              code: `
<form-input 
  placeholder="Placeholder Text"
  iconLeft="search"
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              disabled: true,
              attrName: "Disabled",
              iconLeft: "search",
              model: "name",
              code: `
<form-input 
  placeholder="Placeholder Text"
  iconLeft="search"
  disabled
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              message: "Helper Text",
              attrName: "With Guide",
              iconLeft: "search",
              model: "name",
              code: `
<form-input 
  placeholder="Placeholder Text"
  iconLeft="search"
  message="Helper Text"
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              message: "Helper Text",
              error: true,
              attrName: "Error",
              iconLeft: "search",
              model: "name",
              code: `
<form-input 
  placeholder="Placeholder Text"
  iconLeft="search"
  error
  message="Helper Text"
  v-model="data"
/>`,
            },
          ],
        },
        {
          typeName: "With Icon Right",
          attrInput: [
            {
              placeholder: "Placeholder Text",
              attrName: "Default",
              iconRight: "keyboard_arrow_down",
              model: "name",
              code: `
<form-input 
  placeholder="Placeholder Text"
  iconRight="keyboard_arrow_down"
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              disabled: true,
              attrName: "Disabled",
              iconRight: "keyboard_arrow_down",
              model: "name",
              code: `
<form-input 
  placeholder="Placeholder Text"
  iconRight="keyboard_arrow_down"
  disabled
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              message: "Helper Text",
              attrName: "With Guide",
              iconRight: "keyboard_arrow_down",
              model: "name",
              code: `
<form-input 
  placeholder="Placeholder Text"
  iconRight="keyboard_arrow_down"
  message="Helper Text"
  v-model="data"
/>`,
            },
            {
              placeholder: "Placeholder Text",
              message: "Helper Text",
              error: true,
              attrName: "Error",
              iconRight: "keyboard_arrow_down",
              model: "name",
              code: `
<form-input 
  placeholder="Placeholder Text"
  iconRight="keyboard_arrow_down"
  error
  message="Helper Text"
  v-model="data"
/>`,
            },
          ],
        },
        {
          typeName: "With Label Position",
          attrInput: [
            {
              placeholder: "Placeholder Text",
              attrName: "Label on Left",
              labelText: "Label",
              labelPosition: "left",
              model: "name",
              code: `
<form-input
  :placeholder="Placeholder Text"
  v-model="data"
  labelPosition="left"
>
  <template v-slot:label>
    <typo-text variant="body-2-bold">
      Label
    </typo-text>
  </template>
</form-input>`,
            },
            {
              placeholder: "Placeholder Text",
              attrName: "Label on Top",
              labelText: "Label",
              labelPosition: "top",
              model: "name",
              code: `
<form-input
  :placeholder="Placeholder Text"
  v-model="data"
  labelPosition="top"
>
  <template v-slot:label>
    <typo-text variant="body-2-bold">
      Label
    </typo-text>
  </template>
</form-input>`,
            },
          ],
        },
        {
          typeName: "With Format Currency and Decimal",
          attrInput: [
            {
              placeholder: "0",
              currency: true,
              prefix: "Rp",
              attrName: "Format Currency",
              model: "currency",
              code: `
<form-input
  :placeholder="0"
  v-model="data"
  currency
  prefix="Rp"
/>`,
            },
            {
              placeholder: "0",
              currency: true,
              prefix: "Rp",
              attrName: "Format Currency with Decimal",
              decimal: true,
              model: "currencyDecimal",
              code: `
<form-input
  :placeholder="0"
  v-model="data"
  currency
  decimal
  prefix="Rp"
/>`,
            },
            {
              placeholder: "0",
              attrName: "Format Decimal",
              decimal: 3,
              model: "decimal",
              code: `
<form-input
  :placeholder="0"
  v-model="data"
  decimal
/>`,
            },
          ]
        },
        {
          typeName: "With button inside input",
          attrInput: [
            {
              placeholder: "0",
              currency: true,
              btnOnInput: "Cek NPWP",
              attrName: "Format Currency",
              model: "currency",
              code: `
<form-input
  v-model="data"
  btnOnInput="Cek NPWP"
  @actionBtnOnInput="function=>()"
/>`,
            }
          ]
        }
      ],
    };
  },
};
</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;
    }
  }
}
</style>
