"use client"

import Header from "@/component/Layout/Header"
import SegmentedHeader from "@/component/Layout/SegmentedHeader"
import PhotoContent from "@/component/Media/PhotoContent"
import VideoContent from "@/component/Media/VideoContent"
import { titleState, typeMediaState } from "@/recoil"
import { useTranslations } from "next-intl"
import { useRouter, useSearchParams } from "next/navigation"
import { useEffect } from "react"
import { useRecoilState, useSetRecoilState } from "recoil"

export default function MediaContainer() {
  const setPageTitle = useSetRecoilState(titleState)
  const trans = useTranslations("media")
  const [optionHeader, setOptionHeader] = useRecoilState(typeMediaState)
  const searchParams = useSearchParams()
  const router = useRouter()

  const options = [
    {
      label: trans("photo"),
      value: "photo",
    },
    {
      label: trans("video"),
      value: "video",
    },
  ]

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

  const handleChangeOptionHeader = (value: string | number) => {
    const params = new URLSearchParams(searchParams.toString())
    params.delete("album")
    router.push(`?${params.toString()}`, { scroll: false })
    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">
        {optionHeader === "photo" ? <PhotoContent /> : <VideoContent />}
      </main>
    </>
  )
}