<template>
  <div class="page-form-switch">
    <typo-text variant="title-bold">Form Switch</typo-text>
    <hr class="my-3" />
    <div>
      <div class="pt-1">
        <typo-text variant="body-1-bold">
          <span class="text-capitalize">Switch Button</span>
        </typo-text>
        <div v-for="(item, index) in listSwitch" :key="index">
          <div class="flex flex-wrap mb-1">
            <div
              class="wrap-input"
              v-for="(attrItem, attrIndex) in item.itemSwitch"
              :key="attrIndex"
            >
              <div class="flex justify-center">
                <form-switch
                  v-model="modelSwitch"
                  :value="modelSwitch"
                  :disabled="attrItem.disabled"
                  @onChange="getChange"
                />
              </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>
    </div>
  </div>
</template>

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

export default {
  components: {
    TypoText,
    FormSwitch,
  },
  data() {
    return {
      modelSwitch: true,
      listSwitch: [
        {
          itemSwitch: [
            {
              attrName: "Default",
              code: `
<form-switch
  v-model="data"
  :value="data"
  @onChange="onChange" //optional
/>`,
            },
            {
              attrName: "Disabled",
              disabled: true,
              code: `
<form-switch
  v-model="data"
  :value="data"
  disabled
/>`,
            },
          ],
        },
      ],
    }
  },
  methods: {
    getChange(value) {
      console.log(value)
    }
  }
}
</script>

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

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

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

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