<template>
  <div class="snackbar-page">
    <typo-text variant="title-bold">Snackbar Alert</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="size">
          <option :value="item" v-for="(item, index) in listSize" :key="index">
            {{ item }}
          </option>
        </select>
      </code>
      <code>
        width=
        <input type="text" v-model="width">
      </code>
      <code>
        height=
        <input type="text" v-model="height">
      </code>
    </div>
    <typo-text variant="body-1-bold" class="text-capitalize">
      {{ variantName }}
    </typo-text>
    <div class="wrap-snackbar">
      <div
        class="item-snackbar"
        v-for="(item, index) in dataSnackbar"
        :key="index"
      >
        <snackbar
          :title="item.title"
          :description="item.description"
          :variant="variantName"
          :size="size"
          :useIcon="item.useIcon"
          :height="height"
          :width="width"
        >
          <template v-slot:action>
            <base-icon v-if="item.action == 'close'" iconName="close" />
            <base-button v-if="item.action == 'undo'" variant="tertiary">
              Undo
            </base-button>
          </template>
        </snackbar>
        <pre class="my-0">{{ item.code }}</pre>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: {
    BaseIcon,
    TypoText,
    BaseButton,
    Snackbar
  },
  data() {
    return {
      listVariant: ["danger", "success", "warning", "info"],
      variantName: "danger",
      listSize: [null, "full"],
      size: null,
      width: "",
      height: "",
      dataSnackbar: [
        {
          title: "Alert title",
          code: `
<snackbar
  title="Alert title"
  :variant="variantName"
  :size="sizeName"
  :width="width"
  :height="height"
/>`,
        },
        {
          title: "Alert title",
          action: "close",
          code: `
<snackbar
  title="Alert title"
  :variant="variantName"
  :size="sizeName"
  :width="width"
  :height="height"
>
  <template v-slot:action>
    <base-icon iconName="close" />
  </template>
</snackbar>`,
        },
        {
          title: "Alert title",
          action: "undo",
          code: `
<snackbar
  title="Alert title"
  :variant="variantName"
  :size="sizeName"
  :width="width"
  :height="height"
>
  <template v-slot:action>
    <base-button variant="tertiary">
      Undo
    </base-button>
  </template>
</snackbar>`,
        },
        {
          title: "Alert title",
          useIcon: true,
          code: `
<snackbar
  title="Alert title"
  :variant="variantName"
  :size="sizeName"
  useIcon
  :width="width"
  :height="height"
/>`,
        },
        {
          title: "Alert title",
          action: "close",
          useIcon: true,
          code: `
<snackbar
  title="Alert title"
  :variant="variantName"
  :size="sizeName"
  useIcon
  :width="width"
  :height="height"
>
  <template v-slot:action>
    <base-icon iconName="close" />
  </template>
</snackbar>`,
        },
        {
          title: "Alert title",
          action: "undo",
          useIcon: true,
          code: `
<snackbar
  title="Alert title"
  :variant="variantName"
  :size="sizeName"
  useIcon
  :width="width"
  :height="height"
>
  <template v-slot:action>
    <base-button variant="tertiary">
      Undo
    </base-button>
  </template>
</snackbar>`,
        },
        {
          title: "Alert title",
          description:
            "Interactively monetize corporate alignments and fully tested niche markets. ",
          code: `
<snackbar
  title="Alert title"
  :variant="variantName"
  :size="sizeName"
  :description="textDescription"
  :width="width"
  :height="height"
/>`,
        },
        {
          title: "Alert title",
          action: "close",
          description:
            "Interactively monetize corporate alignments and fully tested niche markets. ",
          code: `
<snackbar
  title="Alert title"
  :variant="variantName"
  :size="sizeName"
  :description="textDescription"
  :width="width"
  :height="height"
>
  <template v-slot:action>
    <base-icon iconName="close" />
  </template>
</snackbar>`,
        },
        {
          title: "Alert title",
          action: "undo",
          description:
            "Interactively monetize corporate alignments and fully tested niche markets. ",
          code: `
<snackbar
  title="Alert title"
  :variant="variantName"
  :size="sizeName"
  :description="textDescription"
  :width="width"
  :height="height"
>
  <template v-slot:action>
    <base-button variant="tertiary">
      Undo
    </base-button>
  </template>
</snackbar>`,
        },
        {
          title: "Alert title",
          description:
            "Interactively monetize corporate alignments and fully tested niche markets. ",
          useIcon: true,
          code: `
<snackbar
  title="Alert title"
  :variant="variantName"
  :size="sizeName"
  :description="textDescription"
  useIcon
  :width="width"
  :height="height"
/>`,
        },
        {
          title: "Alert title",
          action: "close",
          description:
            "Interactively monetize corporate alignments and fully tested niche markets. ",
          useIcon: true,
          code: `
<snackbar
  title="Alert title"
  :variant="variantName"
  :size="sizeName"
  :description="textDescription"
  useIcon
  :width="width"
  :height="height"
>
  <template v-slot:action>
    <base-icon iconName="close" />
  </template>
</snackbar>`,
        },
        {
          title: "Alert title",
          action: "undo",
          description:
            "Interactively monetize corporate alignments and fully tested niche markets. ",
          useIcon: true,
          code: `
<snackbar
  title="Alert title"
  :variant="variantName"
  :size="sizeName"
  :description="textDescription"
  useIcon
  :width="width"
  :height="height"
>
  <template v-slot:action>
    <base-button variant="tertiary">
      Undo
    </base-button>
  </template>
</snackbar>`,
        },
      ]
    };
  },
};
</script>

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

.wrap-snackbar {
  background: $neutral-1;
  padding: 16px 8px;
  display: flex;
  flex-wrap: wrap;

  .item-snackbar {
    width: calc(100% / 3 - 24px);
    padding: 14px 12px;
  }
}
</style>
