<template>
  <div class="page-form-radio">
    <typo-text variant="title-bold">Form Radio</typo-text>
    <hr class="my-3" />
    <div>
      <div class="pt-1">
        <typo-text variant="body-1-bold">
          <span class="text-capitalize">Radio Button</span>
        </typo-text>
        <div v-for="(item, index) in listRadio" :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.itemRadio"
              :key="attrIndex"
            >
              <div
                class="flex justify-center"
                :class="{ 'flex-col': attrItem.labelText }"
              >
                <form-radio
                  :labelText="attrItem.labelText"
                  value="men"
                  v-model="modelRadio"
                  :disabled="attrItem.disabled"
                  class="mr-9 mb-3"
                />
                <form-radio
                  :labelText="attrItem.labelText"
                  value="women"
                  v-model="modelRadio"
                  :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>
    </div>
  </div>
</template>

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

export default {
  components: {
    TypoText,
    FormRadio,
  },
  data() {
    return {
      modelRadio: "",
      listRadio: [
        {
          typeName: "Without Label, Size: Medium and Small",
          itemRadio: [
            {
              attrName: "Default",
              code: `
<form-radio
  :value="dataValue"
  v-model="data"
/>`,
            },
            {
              attrName: "Disabled",
              disabled: true,
              code: `
<form-radio
  :value="dataValue"
  v-model="data"
  disabled
/>`,
            },
          ],
        },
        {
          typeName: "WitLabel, Size: Medium and Small",
          itemRadio: [
            {
              attrName: "Default",
              labelText: "Placeholder Text",
              code: `
<form-radio
  :value="dataValue"
  v-model="data"
  labelText="Placeholder Text"
/>`,
            },
            {
              attrName: "Disabled",
              disabled: true,
              labelText: "Placeholder Text",
              code: `
<form-radio
  :value="dataValue"
  v-model="data"
  disabled
  labelText="Placeholder Text"
/>`,
            },
          ],
        },
      ],
    }
  },
}
</script>

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

.page-form-radio {
  .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>