<script>
import ButtonModal from '@molecules/ButtonModal/ButtonModal.vue'
import Datepicker from "@molecules/VDatepicker/VDatepicker.vue"
import { FwbTextarea } from 'flowbite-vue'

export default {
  name: 'TaskModal',
  components: {
    Datepicker,
    ButtonModal,
    FwbTextarea
  },
  props: {
    taskId: {
      default: "",
      type: String
    }
  },
  data() {
    return {
      task: "",
      task_description: "",
      task_name: ""
    }
  },
  computed: {
  },
  methods: {
    onToggle: ({isOpen}) => {
      console.log(isOpen)
    }
  }
}

</script>

<template>
  <ButtonModal
    forcedBtnClass="  "
    containerClass="pt-10 px-4 w-[80vw] 2xl:w-[70vw]"
    :onToggle="onToggle"
  >
    <template #button>
      <span>
        <slot name="button" />
      </span>
    </template>
    <form
      id="period_modal_form"
      phx-submit="form_validation"
      class="flex flex-col gap-3 p-4 w-full min-h-[70vh]"
    >
      <div class="relative hidden">
        <label
          for="id"
          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
        >
          Период (мс)
        </label>
        <input
          id="id"
          class="bg-gray-50 border border-gray-300  text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
          placeholder="Период (мс)"
          name="id"
          type="text"
          value=""
          autocomplete="off"
        >
      </div>
      <h2 class="font-bold text-slate-600 text-xl">
        Описание
      </h2>
      <div class="flex justify-between items-center w-full gap-3">
        <div class="min-w-[150px]">
          <label
            for="dt_start"
            class="block font-w-700 text-sm text-gray-900 dark:text-gray-300"
          >Дата начала</label>
          <div
            class="block mb-2 text-sm text-gray-500 dark:text-gray-300"
          >
            календарь
          </div>
          <Datepicker
            :defaultDate="dtStart"
            :enableTime="true"
            :onchange="setDtStart"
          />
        </div>
        <div class="w-fit flex gap-2 items-end">
          <div class="px-4">
            <div class="font-semibold">
              Период
            </div>
            <div class="flex w-[800px] gap-2">
              <div class="relative ">
                <label
                  for="month"
                  class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
                >
                  месяц
                </label>
                <input
                  id="period_month"
                  class="bg-gray-50 border border-gray-300  text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
                  placeholder=""
                  name="month"
                  type="number"
                  value=""
                  autocomplete="off"
                >
              </div><div class="relative ">
                <label
                  for="day"
                  class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
                >
                  день
                </label>
                <input
                  id="period_day"
                  class="bg-gray-50 border border-gray-300  text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
                  placeholder=""
                  name="day"
                  type="number"
                  value=""
                  autocomplete="off"
                >
              </div><div class="relative ">
                <label
                  for="hour"
                  class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
                >
                  час
                </label>
                <input
                  id="period_hour"
                  class="bg-gray-50 border border-gray-300  text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
                  placeholder=""
                  name="hour"
                  type="number"
                  value=""
                  autocomplete="off"
                >
              </div><div class="relative ">
                <label
                  for="minute"
                  class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
                >
                  минута
                </label>
                <input
                  id="period_minute"
                  class="bg-gray-50 border border-gray-300  text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
                  placeholder=""
                  name="minute"
                  type="number"
                  value=""
                  autocomplete="off"
                >
              </div><div class="relative ">
                <label
                  for="second"
                  class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
                >
                  секунда
                </label>
                <input
                  id="period_second"
                  class="bg-gray-50 border border-gray-300  text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
                  placeholder=""
                  name="second"
                  type="number"
                  value=""
                  autocomplete="off"
                >
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-start items-start flex-col mb-2 w-full col-span-4 w-fit pl-4">
          <label
            for="dt_start"
            class="block mb-2 text-sm font-medium text-gray-900 text-left dark:text-gray-300 font-semibold"
          >Задача включена</label>
          <div class="block mb-2 text-sm text-gray-500 dark:text-gray-300">
            переключить
          </div>
          <div class="form-check form-switch">
            <label class="relative inline-flex items-center cursor-pointer">
              <input
                type="checkbox"
                value=""
                class="sr-only peer"
                :checked="false"
              >
              <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-2 peer-focus:ring-green-700 dark:peer-focus:ring-green-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full  after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 transition-all  peer-checked:bg-green-600" />
            </label>
          </div>
        </div>
      </div>
      <div class="relative ">
        <label
          for="name"
          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
        >
          Название задачи
        </label>
        <input
          id="name"
          class="bg-gray-50 border border-gray-300  text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
          placeholder="Название задачи"
          name="name"
          type="text"
          value=""
          autocomplete="off"
        >
      </div>
      <fwb-textarea
        v-model="task_description"
        :rows="4"
        label="Описание задачи"
        placeholder="Описание задачи"
        class="w-full"
      />
      <fwb-textarea
        v-model="task"
        :rows="14"
        label="Тело задачи"
        placeholder="тело задачи"
        class="w-full"
      />
      <button
        v-if="taskId != 'new'"
        id="btn_update_period"
        type="submit"
        class="cursor-pointer text-white bg-primary hover:brightness-90 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-ssm w-full px-5 py-1 text-center transition-all w-[150px]"
        event="update_period"
        from-id="period_modal_form"
        phx-hook="SendFormData"
      >
        Обновить задачу
      </button>
      <button
        v-if="taskId == 'new'"
        id="btn_create_period"
        type="submit"
        class="cursor-pointer text-white bg-primary hover:brightness-90 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-ssm w-full px-5 py-1 text-center transition-all w-[150px]"
        event="create_period"
        from-id="period_modal_form"
        phx-hook="SendFormData"
      >
        Добавить задачу
      </button>
    </form>
  </ButtonModal>
</template>
