import { useState } from 'react'
import { Link, useFetcher, useRouteLoaderData } from 'react-router'

import type { TCategorySchema } from '~/apis/common/get-categories'
import { CloseIcon } from '~/components/icons/close'
import { MenuIcon } from '~/components/icons/menu'
import { Button } from '~/components/ui/button'
import { useNewsContext } from '~/contexts/news'
import { HeaderSearch } from '~/layouts/news/header-search'
import type { loader } from '~/routes/_layout'

type THeaderMenuMobile = {
  menu?: TCategorySchema['data']
}

export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
  const { menu } = properties
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const { setIsLoginOpen } = useNewsContext()
  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
  const userData = loaderData?.userData
  const fetcher = useFetcher()

  const handleToggleMenu = (): void => {
    setIsMenuOpen(!isMenuOpen)
  }
  return (
    <>
      <div className="relative z-20 flex min-h-[65px] bg-[#2E2F7C] font-[sans-serif] tracking-wide text-white sm:hidden sm:px-10">
        <div className="mx-auto flex w-full max-w-screen-xl flex-wrap items-center gap-4 align-middle">
          {/* Menu */}
          <div
            className={`z-20 transition-transform duration-300 max-lg:fixed max-lg:top-0 max-lg:left-0 max-lg:h-full max-lg:w-full max-lg:overflow-auto max-lg:bg-[#2E2F7C] max-lg:p-6 max-lg:shadow-md ${
              isMenuOpen ? 'translate-x-0' : '-translate-x-full'
            }`}
          >
            {/* Tombol Close */}
            <button
              onClick={handleToggleMenu}
              className="fixed top-5 right-5 z-20 flex h-9 w-9 items-center justify-center lg:hidden"
            >
              <CloseIcon
                width={50}
                height={50}
              />
            </button>

            {/* List Menu */}
            <ul className="mx-10 mt-10 max-lg:space-y-3 lg:ml-14 lg:flex lg:gap-x-5">
              {menu?.map((item, index) => (
                <li
                  key={index}
                  className="px-3 max-lg:border-b max-lg:py-3"
                >
                  <Link
                    key={item.id}
                    to={`/category/${item.code}`}
                    className={
                      'flex h-full items-center justify-center border-white px-[35px] sm:border-r'
                    }
                  >
                    {item.name}
                  </Link>
                </li>
              ))}

              {userData ? (
                <fetcher.Form
                  method="POST"
                  action="/actions/logout"
                >
                  <Button
                    variant="newsSecondary"
                    className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
                    type="submit"
                  >
                    Logout
                  </Button>
                </fetcher.Form>
              ) : (
                <Button
                  variant="newsSecondary"
                  className="w-full bg-white px-[35px] py-3 text-center text-[#2E2F7C] sm:hidden"
                  onClick={() => {
                    setIsMenuOpen(false)
                    setIsLoginOpen(true)
                  }}
                >
                  Masuk
                </Button>
              )}
            </ul>
          </div>

          {/* Search dan Toggle Button */}
          <div className="align-center flex w-full justify-center">
            <button
              onClick={handleToggleMenu}
              className="h-[63px] border border-white px-4 lg:hidden"
            >
              <MenuIcon
                width={25}
                height={25}
              />
            </button>
            <div className="w-full py-3">
              <HeaderSearch />
            </div>
          </div>
        </div>
      </div>
    </>
  )
}