"use clinet"

import { useRouter } from "@/i18n/routing"
import { filterOption } from "@/util/Common"
import { Button, DatePicker, Form, Select, TimePicker } from "antd"
import classNames from "classnames"
import { useTranslations } from "next-intl"
import dynamic from "next/dynamic"
import { useEffect, useState } from "react"
import { CustomCkEditerCss } from "../Books/style"
import dayjs, { Dayjs } from "dayjs"
import Image from "next/image"
import { css } from "@emotion/css"
import { useCreateReminder, useGetReminderCategories, useUpdateReminder } from "@/hook/useReminder"
import { IReminderItem } from "@/type/Reminders"
import NotifyCustom from "../Common/NotifyCustom"
import CustomEditor from "../Common/CustomEditor"
// const CustomEditor = dynamic(() => import("@/component/Common/CustomEditor"), { ssr: false })

type IProps = {
  submit: boolean
  cancel: boolean
  reminder?: IReminderItem
  onError: () => void
}

export default function FormReminder({ submit, cancel, reminder, onError }: IProps) {
  const [formRef] = Form.useForm()
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  const tranButton = useTranslations("button")
  const trans = useTranslations("reminder")
  const transGeneral = useTranslations("general")
  const tranForm = useTranslations("form")
  const { data: categories } = useGetReminderCategories()
  const createReminder = useCreateReminder()
  const updateReminder = useUpdateReminder()
  const [openNotify, setOpenNotify] = useState(false)
  const [messageNotify, setMessageNotify] = useState<{
    type: "success" | "error"
    message: string
    description: string
  }>({
    type: "error",
    message: "",
    description: "",
  })
  const transMessage = useTranslations("message")

  useEffect(() => {
    formRef.resetFields()
    setLoading(false)
  }, [])

  useEffect(() => {
    if (reminder) {
      formRef.setFieldsValue({
        category_id: reminder.category.id,
        message: reminder.message,
        time: dayjs.unix(reminder.date),
        day: dayjs.unix(reminder.date),
      })
    } else {
      formRef.resetFields()
    }
  }, [reminder])

  const onFinish = (values: any) => {
    setLoading(true)
    const { time, day } = values
    const params = Object.assign({}, values)
    if (time && day) {
      const datetime = dayjs(day).hour(dayjs(time).hour()).minute(dayjs(time).minute())
      const timestamp = datetime.unix()
      params.datetime = timestamp
    }
    delete params.time
    delete params.day

    if (reminder) {
      updateReminder
        .mutateAsync({ ...params, id: reminder.id })
        .then(() => {
          formRef.resetFields()
          router.push("/reminder")
          setMessageNotify({
            type: "success",
            message: transMessage("congratulation"),
            description: trans("update_reminder_success"),
          })
          setOpenNotify(true)
        })
        .catch((errors) => {
          setMessageNotify({
            type: "error",
            message: transMessage("something_wrong"),
            description: errors?.response?.data.msgs || transMessage("fail"),
          })
          onError()
          setOpenNotify(true)
        })
        .finally(() => {
          setLoading(false)
        })
    } else {
      createReminder
        .mutateAsync(params)
        .then(() => {
          formRef.resetFields()
          router.push("/reminder")
          setMessageNotify({
            type: "success",
            message: transMessage("congratulation"),
            description: trans("add_reminder_success"),
          })
          setOpenNotify(true)
        })
        .catch((errors) => {
          setMessageNotify({
            type: "error",
            message: transMessage("something_wrong"),
            description: errors?.response?.data.msgs || transMessage("fail"),
          })
          onError()
          setOpenNotify(true)
        })
        .finally(() => {
          setLoading(false)
        })
    }
  }

  useEffect(() => {
    if (cancel) {
      formRef.resetFields()
      router.push("/reminder")
    } else if (submit) {
      formRef.submit()
    }
  }, [submit, cancel])

  const disabledEndDate = (current: Dayjs | null) => {
    return current ? current.isBefore(dayjs(), "day") : false
  }

  const CustomSelect = css`
    .ant-select-item {
      padding-inline-start: 12px;
    }
  `
  // chain(reminderType())
  //   .groupBy("group")
  //   .map((items) => ({
  //     label: "",
  //     title: "",
  //     options: items.map((item) => ({
  //       label: item.label,
  //       value: item.value,
  //       icon: item.icon,
  //     })),
  //   }))
  //   .value()
  const onFinishFailed = () => {
    onError()
  }

  const handleCancel = () => {
    formRef.resetFields()
    router.push("/reminder")
  }

  return (
    <div className="px-4 py-6 grow overflow-y-auto">
      <Form
        name="add_reminder"
        form={formRef}
        onFinish={onFinish}
        onError={() => onError()}
        autoComplete="off"
        layout="vertical"
        onFinishFailed={onFinishFailed}
        className={classNames(CustomCkEditerCss)}>
        <p className="text-[var(--secondary-60)] lg:text-lg mb-6">
          {transGeneral("please_fill_require")} <span className="text-[var(--danger-50)]">*</span>
        </p>
        <div className="grid gap-4 grid-cols-12">
          <div className="col-span-12 lg:col-span-8 bg-[var(--secondary-10)] rounded-lg border border-solid border-[var(--secondary-20)] px-4 lg:px-6 pt-6">
            {/* <p className="text-base font-semibold mb-6">{trans("reminder_information")}</p> */}
            <Form.Item
              label={transGeneral("type")}
              name="category_id"
              rules={[{ required: true, message: trans("choose_the_reminder_type") }]}>
              <Select
                showSearch
                size="large"
                placeholder={trans("choose_the_reminder_type")}
                popupClassName={CustomSelect}
                filterOption={filterOption}
                // reminderType()
                options={
                  categories?.data
                    ? categories?.data.map((item) => {
                        return {
                          label: item.category_name,
                          value: item.id,
                          icon: item.icon,
                        }
                      })
                    : []
                }
                optionRender={(option: any) => (
                  <span className="inline-flex flex-col items-center justify-center my-2">
                    <span className="bg-[var(--secondary-10)] rounded-lg border border-[var(--secondary-20)] inline-block mb-2">
                      <Image
                        src={option.data.icon}
                        alt={option.data.label}
                        width={120}
                        height={120}
                      />
                    </span>
                    <span>{option.data.label}</span>
                  </span>
                )}
              />
            </Form.Item>
            <Form.Item
              label={tranForm("description")}
              name="message"
              rules={[{ required: true, message: tranForm("placeholder_input", { name: tranForm("description") }) }]}>
              <CustomEditor />
            </Form.Item>
          </div>
          <div className="col-span-12 lg:col-span-4">
            <div className="bg-[var(--secondary-10)] rounded-lg border border-solid border-[var(--secondary-20)] px-4 lg:px-6 pt-6 mb-4">
              <p className="text-base font-semibold mb-6">
                <span className="text-[var(--danger-50)]">*</span> {trans("time_date")}
              </p>
              <div className="gap-2 grid grid-cols-12">
                <Form.Item
                  className="col-span-6 md:col-span-5"
                  label=""
                  name="time"
                  rules={[{ required: true, message: "Choose time" }]}>
                  <TimePicker
                    className="w-full"
                    format="HH:mm"
                    size="large"
                  />
                </Form.Item>
                <Form.Item
                  className="col-span-6 md:col-span-7"
                  label=""
                  name="day"
                  rules={[{ required: true, message: "Choose date" }]}>
                  <DatePicker
                    className="w-full"
                    format="MMM DD, YYYY"
                    size="large"
                    disabledDate={disabledEndDate}
                  />
                </Form.Item>
              </div>
            </div>
          </div>
        </div>
        <div className="pt-4 flex items-center gap-2 md:hidden">
          <Button
            className="w-full md:!text-base lg:!text-lg font-bold !h-10 md:!h-12 xl:!h-16 !rounded-lg !border-[var(--secondary-20)] !bg-[var(--secondary-10)]"
            loading={loading}
            onClick={handleCancel}>
            {tranButton("cancel")}
          </Button>
          <Button
            type="primary"
            htmlType="submit"
            className="w-full md:!text-base lg:!text-lg font-bold !h-10 md:!h-12 xl:!h-16 !rounded-lg"
            loading={loading}>
            {tranButton("submit")}
          </Button>
        </div>
      </Form>
      <NotifyCustom
        type={messageNotify.type}
        message={messageNotify.message}
        description={messageNotify.description}
        isOpen={openNotify}
        onclose={() => setOpenNotify(false)}
      />
    </div>
  )
}