"use client"

import FormAddEvent from "@/component/Calendar/FormAddEvent"
import Header from "@/component/Layout/Header"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import SegmentedHeader from "@/component/Layout/SegmentedHeader"
import { calendarOptions } from "@/config/constant"
import { titleState, typeCalendarState } from "@/recoil"
import { useTranslations } from "next-intl"
import { useEffect, useState } from "react"
import { useRecoilState, useSetRecoilState } from "recoil"

type IProps = {
  event: any
}

export default function UpdateEventContainer({ event }: IProps) {
  const setPageTitle = useSetRecoilState(titleState)
  const trans = useTranslations("calendar")
  const tranButton = useTranslations("button")
  const [submit, setSubmit] = useState(false)
  const [cancel, setCancel] = useState(false)
  const [optionHeader, setOptionHeader] = useRecoilState(typeCalendarState)
  const options = calendarOptions()

  useEffect(() => {
    setSubmit(false)
    setCancel(false)
  }, [])

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

  const handleChangeOptionHeader = (value: string | number) => {
    setOptionHeader(value as string)
  }

  return (
    <>
      <Header
        slot={
          <SegmentedHeader
            value={optionHeader}
            options={options}
            onChange={handleChangeOptionHeader}
          />
        }
      />
      <main
        id="main-content"
        className="flex-1 px-4 lg:px-5 xl:px-6 overflow-y-auto pt-4 pb-6 overflow-x-hidden">
        <div className="border border-[var(--secondary-20)] rounded-lg h-full flex flex-col">
          <HeaderBreadcrumb
            items={[
              {
                aria_label: trans("calendar"),
                href: "/calendar",
                title: trans("calendar"),
              },
              {
                aria_label: trans("edit_event"),
                href: "#",
                title: trans("edit_event"),
              },
            ]}
            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>
            }
          />
          <FormAddEvent
            event={event}
            submit={submit}
            cancel={cancel}
            onError={() => {
              setSubmit(false)
              setCancel(false)
            }}
          />
        </div>
      </main>
    </>
  )
}