"use client"

import Header from "@/component/Layout/Header"
import SegmentedHeader from "@/component/Layout/SegmentedHeader"
import { loggedInUserState, titleState } from "@/recoil"
import { useEffect, useState } from "react"
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faPlus } from "@fortawesome/free-solid-svg-icons"
import ChatRecent from "@/component/Chat/Recent"
import ChatGroups from "@/component/Chat/Groups"
import { typeChatState } from "@/recoil/chat"

export default function ChatContainer() {
  const setPageTitle = useSetRecoilState(titleState)
  const [optionHeader, setOptionHeader] = useRecoilState(typeChatState)
  const loggedInUser = useRecoilValue(loggedInUserState)

  const [openDrawer, setOpenDrawer] = useState<boolean>(false)
  const [loading, setLoading] = useState<boolean>(true)
  
  const showLoading = () => {
    setOpenDrawer(true)
    setLoading(true)

    setTimeout(() => {
      setLoading(false)
    }, 1000)
  }

  const options = [
    {
      label: "Recent",
      value: "recent",
    },
    {
      label: "Contacts",
      value: "contact",
    },
    {
      label: "Groups",
      value: "group",
    },
  ]

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

  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 grow h-full 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: optionHeader === "recent" ? "My Recent Chat" : optionHeader === "contact" ? "My Recent Chat" : "My Groups Chat",
                href: "#",
                title: optionHeader === "recent" ? "My Recent Chat" : optionHeader === "contact" ? "My Recent Chat" : "My Groups Chat",
              },
            ]}
            showButton={false}
            slot={
              optionHeader === "group" ? (
                <button
                  type="button"
                  onClick={showLoading}
                  className="rounded-lg border border-solid border-[var(--primary--70)] h-12 px-4 font-semibold bg-[var(--primary--70)] text-white hover:opacity-80 flex items-center gap-2">
                  <FontAwesomeIcon icon={faPlus} />
                  <span className="whitespace-nowrap">Add New Group</span>
                </button>
              ) : null
            }
          />
          <div className="grow md:px-4 md:overflow-y-auto md:py-6">
            {loggedInUser ? (
              optionHeader === "recent" ? (
                <ChatRecent />
              ) : optionHeader === "contact" ? (
                <ChatRecent friendsOnly={true} />
              ) : optionHeader === "group" ? (
                <ChatGroups
                  openDrawer={openDrawer}
                  setOpenDrawer={setOpenDrawer}
                  loading={loading}
                />
              ) : null
            ) : null}
          </div>
        </div>
      </main>
    </>
  )
}