<template>
  <div class="dropdown-page">
    <typo-text variant="title-bold">Drop Down</typo-text>
    <hr class="my-3" />
    <div>
      <div class="pt-1">
        <typo-text variant="body-1-bold"> Drop Down Type </typo-text>
        <div>
          <typo-text variant="caption-bold">Dropdown Regular</typo-text>
          <div class="flex flex-wrap mb-1 mt-1">
            <div class="wrap-content">
              <pre>
{{ 
`<dropdown 
  :show="show" 
  @handleClose="show = false" 
  :disabled="true | false"
>
  <template v-slot:head>
    <base-button variant="secondary" @click="show = !show">
      Dropdown
    </base-button>
  </template>
  <template v-slot:list>
    <button>Bayar</button>
    <button>Edit</button>
    <button class="danger">Hapus</button>
  </template>
  <template v-slot:additional></template>
</dropdown>`
}}
              </pre>
              <dropdown :show="show" @handleClose="show = false">
                <template v-slot:head>
                  <base-button variant="secondary" @click="show = !show">
                    Dropdown
                  </base-button>
                </template>
                <template v-slot:list>
                  <button>Bayar</button>
                  <button>Edit</button>
                  <button class="danger">Hapus</button>
                </template>
                <template v-slot:additional></template>
              </dropdown>
            </div>
          </div>
        </div>
        <div>
          <typo-text variant="caption-bold">Dropdown Dua Kolom</typo-text>
          <div class="flex flex-wrap mb-1 mt-1">
            <div class="wrap-content">
              <pre>
{{ 
`<dropdown-select 
  name="dropdownColumn"
  :list="listSelect"
  v-model="valueSelect"
  :disabled="true | false"
  :readonly="true | false"
  error
  errorIcon="error_outline"
  message="ada error disini"
  placeholder="Pilih Perusahaan"
  @valueChanged="Function setiap perubahan value"
>
  <template v-slot:label>
    <typo-text variant="body-2-bold">
      NPWP
    </typo-text>
  </template>
</dropdown-select>>

// Data Set
listSelect: [
  {
    id: 1,
    label: "PT Indofood CBP Sukses Makmur 1 Tbk",
    name: "84.450.753.3-003.001",
    value: "84.450.753.3-003.001",
  }
]`
}}
              </pre>
              <dropdown-select
                name="dropdownSelect"
                :list="listSelect"
                v-model="valueSelect"
                placeholder="Pilih Perusahaan"
              >
                <template v-slot:label>
                  <typo-text variant="body-2-bold">
                    NPWP
                  </typo-text>
                </template>
              </dropdown-select>
            </div>
          </div>
        </div>
        <div>
          <typo-text variant="caption-bold">Dropdown Checkbox</typo-text>
          <div class="flex flex-wrap mb-1 mt-1">
            <div class="wrap-content">
              <pre>
{{
`<dropdown 
  :show="showCheckbox" 
  @handleClose="showCheckbox = false"
  :disabled="true | false"
>
  <template v-slot:head>
    <base-button variant="secondary" @click="showCheckbox = !showCheckbox">
      Dropdown Checkbox
    </base-button>
  </template>
  <template v-slot:list>
    <form-group-checkbox
      name="dropdownCheckbox"
      v-model="valueCheckbox"
      :list="listCheckbox"
      value="value"
      labelText="label"
    />
  </template>
</dropdown>`
}}
              </pre>
              <dropdown
                :show="showCheckbox"
                @handleClose="showCheckbox = false"
              >
                <template v-slot:head>
                  <base-button
                    variant="secondary"
                    @click="showCheckbox = !showCheckbox"
                  >
                    Dropdown Checkbox
                  </base-button>
                </template>
                <template v-slot:list>
                  <form-group-checkbox
                    name="dropdownCheckbox"
                    v-model="valueCheckbox"
                    :list="listCheckbox"
                    value="value"
                    labelText="label"
                  />
                </template>
              </dropdown>
            </div>
          </div>
        </div>
        <div>
          <typo-text variant="caption-bold">Dropdown Multiple Tag</typo-text>
          <div class="flex flex-wrap mb-1 mt-1">
            <div class="wrap-content">
              <pre>
{{
`<dropdown
  :show="showMultipleTag"
  @handleClose="showMultipleTag = false"
  :disabled="true | false"
  :readonly="true | false"
>
  <template v-slot:head>
    <dropdown-multiple-tag
      @handleShow="showMultipleTag = !showMultipleTag"
      v-model="valueMultipleTag"
      :show="showMultipleTag"
      :value="valueMultipleTag"
      placeholder="placeholder"
    />
  </template>
  <template v-slot:list>
    <form-group-checkbox
      name="multipleTag"
      v-model="valueMultipleTag"
      :list="listCheckbox"
      value="value"
      labelText="label"
    />
  </template>
  <template v-slot:additional></template>
</dropdown>`
}}
              </pre>
              <div class="w-1/2">
                <typo-text variant="body-2-bold" class="mb-2">
                  Tetapkan Peran Ke
                  <typo-text variant="body-2-regular">(Opsional)</typo-text>
                </typo-text>
                <dropdown
                  :show="showMultipleTag"
                  @handleClose="showMultipleTag = false"
                >
                  <template v-slot:head>
                    <dropdown-multiple-tag
                      @handleShow="showMultipleTag = !showMultipleTag"
                      v-model="valueMultipleTag"
                      :show="showMultipleTag"
                      :value="valueMultipleTag"
                    />
                  </template>
                  <template v-slot:list>
                    <form-group-checkbox
                      name="multipleTag"
                      v-model="valueMultipleTag"
                      :list="listCheckbox"
                      value="value"
                      labelText="label"
                    />
                  </template>
                </dropdown>
              </div>
            </div>
          </div>
        </div>
        <div>
          <typo-text variant="caption-bold"
            >Dropdown With Search Inside</typo-text
          >
          <div class="flex flex-wrap mb-1 mt-1">
            <div class="wrap-content">
              <pre>
{{
`<dropdown
  :show="showDropdownSearch"
  @handleClose="showDropdownSearch = false"
  search
  :disabled="true | false"
  :readonly="true | false"
>
  <template v-slot:head>
    <form-input
      placeholder="Cari perusahaan..."
      iconLeft="search"
      v-model="dataSearch"
      @click="showDropdownSearch = true"
      :iconRight="dataSearch ? 'close' : ''"
      @clickIcon="dataSearch = ''"
    />
  </template>
  <template v-slot:list>
    <dropdown-search-list
      :list="listSearch"
      v-model="dataSearch"
      @handleValue="searchValue = $event;"
    />
  </template>
  <template v-slot:additional></template>
</dropdown>

// Datalist
listSearch: [
  {
    label: "PT Indofood CBP Sukses Makmur 1 Tbk",
    name: "84.450.753.3-003.001",
    value: "84.450.753.3-003.001",
  },
],`
}}
              </pre>
              <div class="w-1/2">
                <dropdown
                  :show="showDropdownSearch"
                  @handleClose="showDropdownSearch = false"
                  search
                >
                  <template v-slot:head>
                    <form-input
                      placeholder="Cari perusahaan..."
                      iconLeft="search"
                      v-model="dataSearch"
                      @click="showDropdownSearch = true"
                      class="w-full"
                      :iconRight="dataSearch ? 'close' : ''"
                      @clickIcon="dataSearch = ''"
                    />
                  </template>
                  <template v-slot:list>
                    <dropdown-search-list
                      :list="listSearch"
                      v-model="dataSearch"
                      @handleValue="searchValue = $event;"
                    />
                  </template>
                </dropdown>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DropdownMultipleTag from "@/components/Dropdown/DropdownMultipleTag";
import TypoText from "@/components/Typography/TypoText";
import BaseButton from "@/components/Base/BaseButton";
import FormInput from "@/components/Form/FormInput";
import FormGroupCheckbox from "@/components/Form/FormGroupCheckbox";
import DropdownSelect from "@/components/Dropdown/DropdownSelect";
import Dropdown from "@/components/Dropdown";
import DropdownSearchList from "@/components/Dropdown/DropdownSearchList";

export default {
  components: {
    DropdownMultipleTag,
    TypoText,
    BaseButton,
    FormInput,
    FormGroupCheckbox,
    DropdownSelect,
    Dropdown,
    DropdownSearchList,
  },
  data() {
    return {
      optList: [{ name: "Bayar" }, { name: "Edit" }, { name: "Hapus" }],
      show: false,
      showCheckbox: false,
      valueCheckbox: [],
      listCheckbox: [
        {
          label: "Super Admin",
          value: "Super Admin",
        },
        {
          label: "System Support Admin",
          value: "System Support Admin",
        },
        {
          label: "Customer Service",
          value: "Customer Service",
        },
        {
          label: "Manager",
          value: "Manager",
        },
      ],
      listSelect: [
        {
          id: 1,
          label: "PT Indofood CBP Sukses Makmur 1 Tbk",
          name: "84.450.753.3-003.001",
          value: "84.450.753.3-003.001",
        },
        {
          id: 2,
          label: "PT Indofood CBP Sukses Makmur 2 Tbk",
          name: "84.450.753.3-003.002",
          value: "84.450.753.3-003.002",
        },
        {
          id: 3,
          label: "PT Indofood CBP Sukses Makmur 3 Tbk",
          name: "84.450.753.3-003.003",
          value: "84.450.753.3-003.003",
        },
        {
          id: 4,
          label: "PT Indofood CBP Sukses Makmur 4 Tbk",
          name: "84.450.753.3-003.004",
          value: "84.450.753.3-003.004",
        },
        {
          id: 5,
          label: "PT Indofood CBP Sukses Makmur 5 Tbk",
          name: "84.450.753.3-003.005",
          value: "84.450.753.3-003.005",
        },
        {
          id: 6,
          label: "PT Indofood CBP Sukses Makmur 6 Tbk",
          name: "84.450.753.3-003.006",
          value: "84.450.753.3-003.006",
        },
      ],
      valueSelect: "",
      showMultipleTag: false,
      valueMultipleTag: ["Manager", "Super Admin", "Customer Service"],
      dataSearch: "",
      showDropdownSearch: false,
      listSearch: [
        {
          label: "PT Indofood CBP Sukses Makmur 1 Tbk",
          name: "84.450.753.3-003.001",
          value: "84.450.753.3-003.001"
        },
        {
          label: "PT Indofood CBP Sukses Makmur 2 Tbk",
          name: "84.450.753.3-003.002",
          value: "84.450.753.3-003.002"
        },
        {
          label: "PT Indofood CBP Sukses Makmur 21 Tbk",
          name: "84.450.753.3-003.021",
          value: "84.450.753.3-003.021"
        },
        {
          label: "PT Indofood CBP Sukses Makmur 3 Tbk",
          name: "84.450.753.3-003.003",
          value: "84.450.753.3-003.003"
        },
        {
          label: "PT Indofood CBP Sukses Makmur 4 Tbk",
          name: "84.450.753.3-003.004",
          value: "84.450.753.3-003.004"
        },
        {
          label: "PT Indofood CBP Sukses Makmur 5 Tbk",
          name: "84.450.753.3-003.005",
          value: "84.450.753.3-003.005"
        },
        {
          label: "PT Indofood CBP Sukses Makmur 6 Tbk",
          name: "84.450.753.3-003.006",
          value: "84.450.753.3-003.006"
        },
      ],
      searchValue: ""
    };
  },
};
</script>

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

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

  .wrap-content {
    width: 100%;
    background: $neutral-1;
    padding: 47px;
    display: flex;
    justify-content: space-evenly;
  }
}
</style>
