"use client"

import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import FormReminder from "@/component/Reminder/FormReminder"
import { titleState } from "@/recoil"
import { IReminderItem } from "@/type/Reminders"
import { useTranslations } from "next-intl"
import { useEffect, useState } from "react"
import { useSetRecoilState } from "recoil"

type IProps = {
  reminder: IReminderItem
}

export default function UpdateReminderContainer({ reminder }: IProps) {
  const setPageTitle = useSetRecoilState(titleState)
  const tranButton = useTranslations("button")
  const [submit, setSubmit] = useState(false)
  const [cancel, setCancel] = useState(false)
  const trans = useTranslations("reminder")

  useEffect(() => {
    setPageTitle("Reminder")
  }, [])

  return (
    <div className="border border-[var(--secondary-20)] rounded-lg h-full flex flex-col">
      <HeaderBreadcrumb
        items={[
          {
            aria_label: trans("my_reminder"),
            href: "/reminder",
            title: trans("my_reminder"),
          },
          {
            aria_label: trans("update_reminder"),
            href: "#",
            title: trans("update_reminder"),
          },
        ]}
        slot={
          <div className="hidden md:flex">
            <button
              type="button"
              onClick={() => setCancel(true)}
              className="rounded-lg border border-solid border-[var(--secondary-20)] h-12 px-8 font-semibold bg-[var(--secondary-10)] hover:border-[var(--primary--70)] hover:text-[var(--primary--70)]">
              {tranButton("cancel")}
            </button>
            <button
              type="button"
              onClick={() => setSubmit(true)}
              className="rounded-lg border border-solid border-[var(--primary--70)] h-12 px-8 font-semibold bg-[var(--primary--70)] text-white hover:opacity-80 ml-2">
              {tranButton("submit")}
            </button>
          </div>
        }
      />
      <FormReminder
        reminder={reminder}
        submit={submit}
        cancel={cancel}
        onError={() => {
          setSubmit(false)
          setCancel(false)
        }}
      />
    </div>
  )
}