<template>
  <div class="button">
    <typo-text variant="title-bold">Button</typo-text>
    <hr class="my-3" />
    <div class="wrap-example mb-3">
      <code>
        Variant =
        <select v-model="variantName">
          <option
            :value="item"
            v-for="(item, index) in listVariant"
            :key="index"
          >
            {{ item }}
          </option>
        </select>
      </code>

      <code>
        Size =
        <select v-model="sizeName">
          <option value="small">small</option>
          <option value="medium">medium</option>
          <option value="full">full</option>
        </select>
      </code>

      <code>
        color = 
        <input type="text" v-model="color" style="width: 70px;">
      </code>

      <code>
        colorText = 
        <input type="text" v-model="colorText" style="width: 70px;">
      </code>

      <code>
        width = 
        <input type="text" v-model="width" style="width: 70px;">
      </code>

      <code>
        height = 
        <input type="text" v-model="height" style="width: 70px;">
      </code>
    </div>
    <div>
      <div class="pt-1" v-for="(item, index) in listBtn" :key="index">
        <typo-text variant="body-1-bold">
          <span class="text-capitalize">
            {{ variantName }}
          </span>
          {{ item.name }}
        </typo-text>
        <div v-for="(typeItem, typeIndex) in item.typeBtn" :key="typeIndex">
          <typo-text variant="caption-bold">{{ typeItem.typeName }}</typo-text>
          <div class="group-btn mt-1 flex flex-col">
            <div class="flex flex-col">
              <div
                class="wrap-btn mb-2"
                v-for="(dataItem, dataIndex) in typeItem.btnList"
                :key="dataIndex"
              >
                <base-button
                  :disabled="dataItem.disabled"
                  :variant="variantName"
                  :size="sizeName"
                  :justIcon="dataItem.justIcon"
                  :iconLeft="dataItem.left || dataItem.justIcon ? 'add' : ''"
                  :iconRight="dataItem.right ? 'more_horiz' : ''"
                  :color="color"
                  :colorText="colorText"
                  :height="height"
                  :width="width"
                >
                  <span v-if="!dataItem.justIcon">
                    {{ dataItem.btnName }}
                  </span>
                </base-button>
              </div>
            </div>
            <code>
              <pre class="my-0">
                {{ typeItem.code }}
              </pre>
            </code>
          </div>
        </div>
      </div>

      <div class="pt-1">
        <div class="group-btn mt-1 flex flex-col">
          <code>
            <pre class="my-0">
              {{
`
PROPS

variant
  type: String
  default: primary
  value: [primary, secondary, danger, success, tertiary, tertiary-danger]

disabled
  type: Boolean
  default: false

size
  type: String
  default: medium
  value: [small, medium, full]

color
  type: String
  default: ""
  value: [hexCode]

colorText
  type: [String]
  default: ""

width
  type: [String]
  default: ""

height:
  type: [String]
  default: ""

justIcon
  type: [Boolean]
  default: false

iconLeft
  type: [String]
  default: ""

iconRight
  type: [String]
  default: ""

`
              }}
            </pre>
          </code>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TypoText from "@/components/Typography/TypoText";
import BaseButton from "@/components/Base/BaseButton";

export default {
  components: {
    TypoText,
    BaseButton,
  },
  data() {
    return {
      variantName: "primary",
      sizeName: "medium",
      color: "",
      colorText: "",
      width: "",
      height: "",
      listVariant: ["primary", "danger", "success", "secondary", "tertiary", "tertiary-danger"],
      listBtn: [
        {
          name: "Button",
          variant: "primary",
          typeBtn: [
            {
              typeName: "No Icon",
              code: `
<base-button :disabled="trueOrFalse" variant="variantName">
  Default
</base-button>`,
              btnList: [
                {
                  btnName: "Default",
                  disabled: false,
                },
                {
                  btnName: "Disabled",
                  disabled: true,
                },
              ],
            },
            {
              typeName: "With Icon (Left)",
              code: `
<base-button
  :disabled="trueOrFalse"
  :variant="variantName"
  :size="sizeName"
  iconLeft="add"
>
  Default
</base-button>`,
              btnList: [
                {
                  btnName: "Default",
                  disabled: false,
                  left: true,
                },
                {
                  btnName: "Disabled",
                  disabled: true,
                  left: true,
                },
              ],
            },
            {
              typeName: "With Icon (Right)",
              code: `
<base-button
  :disabled="trueOrFalse"
  :variant="variantName"
  :size="sizeName"
  iconRight="more_horiz"
>
  Default
</base-button>`,
              btnList: [
                {
                  btnName: "Default",
                  disabled: false,
                  right: true,
                },
                {
                  btnName: "Disabled",
                  disabled: true,
                  right: true,
                },
              ],
            },
            {
              typeName: "Just Icon",
              code: `
<base-button
  :disabled="trueOrFalse"
  :variant="variantName"
  :size="sizeName"
  :justIcon="trueOrFalse"
  iconLeft="add"
/>`,
              btnList: [
                {
                  btnName: "Default",
                  disabled: false,
                  justIcon: true,
                },
                {
                  btnName: "Disabled",
                  disabled: true,
                  justIcon: true,
                },
              ],
            },
          ],
        },
      ],
    };
  },
};
</script>

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

.button {
  .caption-bold {
    color: $neutral-4;
  }
  .group-btn {
    background: $neutral-1;
    padding: 32px 44px;
    .wrap-btn {
      width: 100%;
      margin-right: 68px;
    }
    .wrap-btn:last-child {
      margin-right: 0px;
    }
  }
  .body-1-bold {
    line-height: normal;
  }
}
</style>
