<script setup lang="ts">
import {  watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";

const { date2Thai } = useCounterMixin();

const name = defineModel<string>("name"); // ชื่อของข้อมูลสำรองใหม่
const typeTime = defineModel<string>("typeTime", { default: "set" });
const time = defineModel<string>("time"); // กำหนดเวลา
const timeStartEvery = defineModel<string>("timeStartEvery");
const startAt = defineModel<any>("startAt", { default: new Date() }); // วันที่ - เวลาเริ่มการสำรองข้อมูล
const selectDate = defineModel<string[]>("date", { default: [] }); // เลือกวัน
const tab = defineModel<string>("tab"); // ตั้งตารางเวลา

const timeStartEveryOptions: { value: string }[] = Array.from(
  { length: 24 },
  (_, i) => ({ value: (i + 1).toString() })
);

watch(typeTime, () => {
  time.value = "";
  timeStartEvery.value = "";
});
</script>

<template>
  <div class="row q-col-gutter-md items-center text-grey-8">
    <div class="col-12">
      ชื่อของข้อมูลสำรองใหม่
      <q-input
        outlined
        clearable
        hide-bottom-space
        dense
        v-model="name"
        label="ชื่อ Backup"
        :rules="[(val:string) => val.length <= 30 || 'ชื่อต้องไม่เกิน 16 ตัวอักษร' , (val:string) => /^[A-Za-z0-9\-]+$/.test(val) || 'ชื่อต้องเป็นภาษาอังกฤษ พิมพ์ใหญ่หรือเล็ก และตัวเลขเท่านั้น']"
      />
    </div>

    <div class="col-12 column" v-if="tab === 'daily'">
      ทำซ้ำ
      <div class="col-6 row items-center">
        <div class="col-3">
          <q-radio v-model="typeTime" val="set" label="กำหนดเวลา" />
        </div>
        <div class="col-4">
          <q-input
            :disable="typeTime === 'start'"
            v-model="time"
            outlined
            clearable
            hide-bottom-space
            dense
            type="time"
            :rules="[(val:string) => !!val || 'กรุณากำหนดเวลา' ]"
          />
        </div>
      </div>
      <div class="col-6 row items-center q-pt-sm">
        <div class="col-3">
          <q-radio v-model="typeTime" val="start" label="เริ่มทุก" />
        </div>
        <div class="col-4">
          <q-select
            :disable="typeTime === 'set'"
            label="เลือก"
            v-model="timeStartEvery"
            :options="timeStartEveryOptions"
            outlined
            emit-value
            dense
            emit-option
            option-label="value"
            option-value="value"
            map-options
            suffix="ชั่วโมง"
            :rules="[(val:string) => !!val || 'กรุณาเลือกเวลา' ]"
          />
        </div>
      </div>
    </div>

    <div class="col-12 column" v-if="tab === 'weekly'">
      <div class="col-12 row">
        <div>
          ทำซ้ำ
          <q-input
            v-model="time"
            outlined
            clearable
            hide-bottom-space
            dense
            type="time"
            :rules="[(val:string) => !!val || 'กรุณากำหนดเวลา' ]"
          />
        </div>
      </div>

      <div class="col-12 q-gutter-sm row q-pt-sm">
        <q-card
          :class="{
            'bg-primary text-white': selectDate.includes(v.value),
          }"
          style="
            user-select: none;
            transition: 100ms background-color ease-in-out;
          "
          v-for="(v, i) in [
            {
              value: 'mon',
              name: 'จันทร์',
            },
            {
              value: 'tue',
              name: 'อังคาร',
            },
            {
              value: 'wed',
              name: 'พุธ',
            },
            {
              value: 'thu',
              name: 'พฤหัสบดี',
            },
            {
              value: 'fri',
              name: 'ศุกร์',
            },
            {
              value: 'sun',
              name: 'อาทิตย์',
            },
            {
              value: 'sat',
              name: 'เสาร์',
            },
          ]"
          flast
          bordered
          class="q-pa-sm col text-center cursor-pointer"
          @click="
            () => {
              if (!selectDate.includes(v.value)) selectDate.push(v.value);
              else selectDate.splice(selectDate.indexOf(v.value), 1);
            }
          "
          >{{ v.name }}</q-card
        >
      </div>
    </div>

    <div class="col-12 column" v-if="tab === 'monthly'">
      <div class="col-12 row">
        <div>
          ทำซ้ำ
          <q-input
            v-model="time"
            outlined
            clearable
            hide-bottom-space
            dense
            type="time"
            :rules="[(val:string) => !!val || 'กรุณากำหนดเวลา' ]"
          />
        </div>
      </div>

      <div class="col-12 q-pt-sm">
        <div class="row q-col-gutter-sm">
          <div
            class="col-2"
            v-for="(v, i) in Array.from({ length: 31 }, (_, i) => ({
              value: i + 1,
            }))"
          >
            <q-card
              :class="{
                'bg-primary text-white': selectDate.includes(
                  v.value.toString()
                ),
              }"
              style="
                user-select: none;
                transition: 100ms background-color ease-in-out;
              "
              flat
              bordered
              class="text-center q-px-md q-py-sm cursor-pointer"
              @click="
                () => {
                  if (!selectDate.includes(v.value.toString()))
                    selectDate.push(v.value.toString());
                  else
                    selectDate.splice(
                      selectDate.indexOf(v.value.toString()),
                      1
                    );
                }
              "
              >{{ v.value }}</q-card
            >
          </div>
        </div>
      </div>
    </div>

    <div class="col-6 column">
      วันที่ - เวลาเริ่มการสำรองข้อมูล

      <datepicker
        v-model="startAt"
        :locale="'th'"
        selectText="เลือก"
        cancelText="ยกเลิก"
      >
        <template #year="{ year }">{{ year + 543 }}</template>
        <template #year-overlay-value="{ value }">{{
          parseInt(value + 543)
        }}</template>
        <template #trigger>
          <q-input
            dense
            outlined
            :model-value="startAt ? date2Thai(startAt, false, true) : null"
            hide-bottom-space
          >
            <template v-slot:prepend>
              <q-icon
                name="event"
                class="cursor-pointer"
                style="color: var(--q-primary)"
              >
              </q-icon>
            </template>
          </q-input>
        </template>

        <template #action-preview="{ value }">
          {{ date2Thai(value, false, true) }}
        </template>
      </datepicker>

      <!-- <q-input outlined clearable hide-bottom-space dense v-model="startAt">
        <template v-slot:prepend>
          <q-icon name="event" class="cursor-pointer">
            <q-popup-proxy
              cover
              transition-show="scale"
              transition-hide="scale"
            >
              <q-date v-model="startAt" mask="YYYY-MM-DD HH:mm">
                <div class="row items-center justify-end">
                  <q-btn v-close-popup label="Close" color="primary" flat />
                </div>
              </q-date>
            </q-popup-proxy>
          </q-icon>
        </template>

        <template v-slot:append>
          <q-icon name="access_time" class="cursor-pointer">
            <q-popup-proxy
              cover
              transition-show="scale"
              transition-hide="scale"
            >
              <q-time v-model="startAt" mask="YYYY-MM-DD HH:mm" format24h>
                <div class="row items-center justify-end">
                  <q-btn v-close-popup label="Close" color="primary" flat />
                </div>
              </q-time>
            </q-popup-proxy>
          </q-icon>
        </template>
      </q-input> -->
      <!-- 
      <q-input v-model="startAt" outlined clearable hide-bottom-space dense>
        <template v-slot:prepend>
          <q-btn size="8px" icon="event" round>
            <q-popup-proxy
              cover
              transition-show="scale"
              transition-hide="scale"
            >
              <q-date
                v-model="startAt"
                minimal
                navigation-min-year-month="2024/09"
                navigation-max-year-month="2024/09"
              >
                <div class="row items-center justify-end q-gutter-sm">
                  <q-btn label="Cancel" color="primary" flat v-close-popup />
                  <q-btn label="OK" color="primary" flat v-close-popup />
                </div>
              </q-date>
            </q-popup-proxy>
          </q-btn>
        </template>
      </q-input> -->
    </div>
  </div>
</template>

<style lang="scss">
.dp__select {
  color: white;
  font-weight: 500;
  border: 1px solid $public;
  background-color: $public;
}

.dp__cancel {
  font-weight: 500;
}
</style>
