<template>
  <div class="page-form-checkbox">
    <typo-text variant="title-bold">Form Checkbox</typo-text>
    <hr class="my-3" />
    <div>
      <div class="pt-1">
        <typo-text variant="body-1-bold">
          <span class="text-capitalize">Checkbox</span>
        </typo-text>
        <div v-for="(item, index) in listCheckbox" :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.itemCheckbox"
              :key="attrIndex"
            >
              <div
                class="flex justify-center"
                :class="{ 'flex-col': attrItem.labelText }"
              >
                <form-checkbox
                  :labelText="attrItem.labelText"
                  :value="attrItem.value"
                  :iconToggle="attrItem.iconToggle"
                  v-model="modelValue"
                  :disabled="attrItem.disabled"
                  class="mr-9 mb-3"
                />
                <form-checkbox
                  :labelText="attrItem.labelText"
                  :value="attrItem.value"
                  :iconToggle="attrItem.iconToggle"
                  v-model="modelValue"
                  :disabled="attrItem.disabled"
                  size="small"
                  class="mb-3"
                />
              </div>
              <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">
            Multiple select checkbox with array
          </typo-text>
          <div class="flex flex-wrap mb-1">
            <div class="wrap-input w-full">
              <form-group-checkbox
                v-model="valueGroupCheckbox"
                :list="listGroupCheckbox"
                value="value"
                labelText="label"
                name="multipleSelect"
                withLabelBox="kode"
              />
              <div class="mt-2">value: {{ valueGroupCheckbox }}</div>
              <pre>
{{
`<form-group-checkbox
  v-model="valueGroupCheckbox"
  :list="listGroupCheckbox"
  value="value"
  labelText="label"
  withLabelBox="kode"
/>

// Data Set
listGroupCheckbox: [
  {
    label: "Super Admin",
    value: "super-admin",
    kode: "S"
  },
  {
    label: "System Support Admin",
    value: "system-support-admin",
    kode: "A"
  },
  {
    label: "Customer Service",
    value: "customer-service",
    kode: "C"
  },
  {
    label: "Manager",
    value: "manager",
    kode: "M"
  },
]`
}}
              </pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: {
    TypoText,
    FormCheckbox,
    FormGroupCheckbox,
  },
  data() {
    return {
      modelValue: false,
      indexLabel: 0,
      valueGroupCheckbox: [],
      listGroupCheckbox: [
        {
          label: "Super Admin",
          value: "super-admin",
          kode: "S"
        },
        {
          label: "System Support Admin",
          value: "system-support-admin",
          kode: "A"
        },
        {
          label: "Customer Service",
          value: "customer-service",
          kode: "C"
        },
        {
          label: "Manager",
          value: "manager",
          kode: "M"
        },
      ],
      listCheckbox: [
        {
          typeName: "Without Label, Size: Medium and Small",
          itemCheckbox: [
            {
              attrName: "Default",
              value: "default",
              code: `
<form-checkbox
  :value="data"
  v-model="data"
/>`,
            },
            {
              attrName: "Selected Sebagian",
              iconToggle: "indeterminate_check_box",
              value: "sebagian",
              code: `
<form-checkbox
  iconToggle="indeterminate_check_box"
  :value="data"
  v-model="data"
/>`,
            },
            {
              attrName: "Disabled",
              disabled: true,
              value: "disabled",
              code: `
<form-checkbox
  :value="data"
  v-model="data"
  disabled
/>`,
            },
          ],
        },
        {
          typeName: "WitLabel, Size: Medium and Small",
          itemCheckbox: [
            {
              attrName: "Default",
              labelText: "Placeholder Text",
              value: "placeholderDefault",
              code: `
<form-checkbox
  :value="data"
  v-model="data"
  labelText="Placeholder Text"
/>`,
            },
            {
              attrName: "Selected Sebagian",
              iconToggle: "indeterminate_check_box",
              labelText: "Placeholder Text",
              value: "placeholderSebagian",
              code: `
<form-checkbox
  iconToggle="indeterminate_check_box"
  :value="data"
  v-model="data"
  labelText="Placeholder Text"
/>`,
            },
            {
              attrName: "Disabled",
              disabled: true,
              labelText: "Placeholder Text",
              value: "placeholderDisabled",
              code: `
<form-checkbox
  :value="data"
  v-model="data"
  disabled
  labelText="Placeholder Text"
/>`,
            },
          ],
        },
      ],
    }
  },
}
</script>

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

.page-form-checkbox {
  .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;
    }
    .base-checkbox-group {
      margin-top: 8px;
    }
  }

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