"use client"

import FormFolder from "@/component/Documents/FormFolder"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import { titleState } from "@/recoil"
import { useTranslations } from "next-intl"
import { useEffect, useState } from "react"
import { useSetRecoilState } from "recoil"

type Props = {
  folder: any
}

export default function EditFolderContainer({ folder }: Props) {
  const setPageTitle = useSetRecoilState(titleState)
  const tranButton = useTranslations("button")
  const [submit, setSubmit] = useState(false)
  const [cancel, setCancel] = useState(false)
  const trans = useTranslations("document")

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

  return (
    <div className="border border-[var(--secondary-20)] rounded-lg h-full flex flex-col">
      <HeaderBreadcrumb
        items={[
          {
            aria_label: trans("my_folder"),
            href: "/documents",
            title: trans("my_folder"),
          },
          {
            aria_label: trans("edit_folder"),
            href: "#",
            title: trans("edit_folder"),
          },
        ]}
        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>
        }
      />
      <FormFolder
        submit={submit}
        cancel={cancel}
        folder={folder}
        edit={true}
        onError={() => {
          setSubmit(false)
          setCancel(false)
        }}
      />
    </div>
  )
}