<template>
  <div class="page-datepicker">
    <typo-text variant="title-bold">Datepicker</typo-text>
    <hr class="my-3" />
    <div class="pt-1">
      <typo-text variant="body-1-bold" class="mb-2">Datepicker</typo-text>
      <div class="wrap-example mb-3">
        <code>
          mode=
          <select v-model="valueMode">
            <option
              :value="item"
              v-for="(item, index) in listMode"
              :key="index"
            >
              {{ item }}
            </option>
          </select>
        </code>
        <code>
          pickerType=
          <select v-model="valuePickerType" @change="valueFormatDate = listFormatDate[valuePickerType][0]">
            <option
              :value="item"
              v-for="(item, index) in listPickerType"
              :key="index"
            >
              {{ item }}
            </option>
          </select>
        </code>
        <code>
          formatDate=
          <select v-model="valueFormatDate">
            <option
              :value="item"
              v-for="(item, index) in listFormatDate[valuePickerType]"
              :key="index"
            >
              {{ item }}
            </option>
          </select>
        </code>
        <code>
          formatValue=
          <select v-model="valueFormat">
            <option
              :value="item"
              v-for="(item, index) in listFormatDate[valuePickerType]"
              :key="index"
            >
              {{ item }}
            </option>
          </select>
        </code>
      </div>
      <div class="wrap-content">
        <date-picker
          ref="datePicker"
          :mode="valueMode"
          :clearAble="true"
          :pickerType="valuePickerType"
          :formatDate="valueFormatDate"
          :formatValue="valueFormat"
          v-model="dateSelection"
          @drag="dragSelection = $event"
        />
        <pre style="white-space: break-spaces;">
{{ dateSelection }}

{{
`
PROPS:

mode
  type: String
  default: "single"
  value: ["single", "range"]  

pickerType
  type: String
  default: "day"
  value: ["day", "month", "year"]

clearAble
  type: Boolean
  default: true
  value: [true, false]

autoClose
  type: Boolean,
  default: false

disabled
  type: Boolean,
  default: false

readonlyDate
  type: Boolean,
  default: false

placeholder
  type: String,
  default: null

disabledDate
  type: Array
  default: null

maxDate
  type: [Object],
  default: null

minDate
  type: [Object],
  default: null

minMonth:
  type: String,
  default: null,

maxMonth
  type: String,
  default: null,

formatDate
  type: String
  default: "dd-mm-yyyy"
  value: ["dd-mm-yyyy", "dd/mm/yyyy", "dd mm yyyy", "yyyy-mm-dd", "yyyy/mm/dd", "yyyy mm dd", "dd-mmm-yyyy", "dd/mmm/yyyy", "dd mmm yyyy", "mm-yyyy", "mm/yyyy", "mm yyyy", "yyyy-mm", "yyyy/mm", "yyyy mm", "mmm-yyyy", "mmm/yyyy", "mmm yyyy"]

formatValue
  type: String
  default: null
  value: ["dd-mm-yyyy", "dd/mm/yyyy", "dd mm yyyy", "yyyy-mm-dd", "yyyy/mm/dd", "yyyy mm dd", "dd-mmm-yyyy", "dd/mmm/yyyy", "dd mmm yyyy", "mm-yyyy", "mm/yyyy", "mm yyyy", "yyyy-mm", "yyyy/mm", "yyyy mm", "mmm-yyyy", "mmm/yyyy", "mmm yyyy"]




EXAMPLE

<date-picker
  autoClose
  ref="datePicker"
  mode="${valueMode}"
  pickerType="${valuePickerType}"
  formatDate="${valueFormatDate}"
  placeholder="placeholder" //default format date
  formatValue="${valueFormat}" // jika tidak di set value balikan seperti new Date().toISOString() (2023-10-05T17:00:00.000Z)
  :disabledDate="disabledDate"
  :clearAble="true"
  :disabled="true | false"
  :readonly="true | false"
  v-model="dateSelection"
  @drag="dragSelection = $event"
  @update:modelValue="functionWithValue" // Function yang dipanggil setiap ada perubahan data
>
  // for custom action field
  // beri nama ref dan panggil function handleClick() untuk memunculkan/menutup datepicker
  <template v-slot:action>
    <base-button @click="$refs.datePicker.handleClick()">
      Masa Pajak
    </base-button>
  </template>

  <template v-slot:actionFooter>
    <base-button
      width="fit-content"
      variant="primary"
      @click="$refs.datePicker.handleClick()"
    >
      OK
    </base-button>
  </template>
</date-picker>

// example current value:
mode "single": 24-02-2022 (mengikuti formatValue)
mode "range": { start: "11-02-2022", end: "22-02-2022" }
pickerType "month": 02-2022
pickerType "year": 2022

// example props disabledDate
disabledDate use return array with formatDate

// example minMonth & maxMonth
minMonth: "03/2023"
akan disable dibawah bulan Maret 2023

maxMonth: "06/2023"
akan disable diatas bulan Juni 2023

// example minDate & maxDate
format value yang diperlukan berupa object seperti "new Date()" untuk semua pickerType
note: minDate & maxDate dapat digunakan mengikuti pickerType

// example format date
- day: d / dd / ddd
- month: m / mm / mmm
- year: yyyy only


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

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

export default {
  components: {
    TypoText,
    DatePicker,
    BaseButton
  },
  data() {
    return {
      dateSelection: null,
      dragSelection: null,
      listMode: ["single", "range"],
      listPickerType: ["day", "month", "year"],
      valueMode: "single",
      valuePickerType: "day",
      valueFormatDate: "dd-mm-yyyy",
      valueFormat: null,
      listFormatDate: {
        day: [
          "",
          "dd-mm-yyyy",
          "dd/mm/yyyy",
          "dd mm yyyy",
          "yyyy-mm-dd",
          "yyyy/mm/dd",
          "yyyy mm dd",
          "dd-mmm-yyyy",
          "dd/mmm/yyyy",
          "dd mmm yyyy",
        ],
        month: [
          "mm-yyyy",
          "mm/yyyy",
          "mm yyyy",
          "yyyy-mm",
          "yyyy/mm",
          "yyyy mm",
          "mmm-yyyy",
          "mmm/yyyy",
          "mmm yyyy",
          "mmm",
          "mm"
        ],
        year: [
          "yyyy"
        ]
      },
      disabledDate: ["2023", "2024"]
    }
  },
}
</script>

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

.page-datepicker {
  .wrap-content {
    background: $neutral-1;
    padding: 32px 37px;
  }
}  
</style>