import { useState } from 'react'
import { Link } from 'react-router'

import { PopupModal } from '~/components/popup/modal'
import { Button } from '~/components/ui/button'
import { FormLogin } from '~/components/ui/form-login'
import { FormRegister } from '~/components/ui/form-register'
import { APP } from '~/data/meta'

export const HeaderTop = () => {
  const [isLoginOpen, setIsLoginOpen] = useState(false)
  const [isRegisterOpen, setIsRegisterOpen] = useState(false)

  return (
    <>
      <div className="flex h-[60px] items-center justify-between bg-white px-5 align-middle sm:h-[100px] sm:gap-[15px] sm:px-[50px] sm:py-[20px]">
        <Link
          to="/news"
          className="mt-2 h-full py-2"
        >
          <img
            src={APP.logo}
            alt={APP.title}
            className="h-3/4 w-auto sm:h-full"
          />
        </Link>
        <div className="hidden h-full items-center py-1.5 font-light whitespace-pre-line sm:flex">
          {APP.description}
        </div>
        <div className="flex items-center gap-[15px]">
          <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
            About Us
          </Button>
          <Button
            variant="newsSecondary"
            className="hidden sm:block"
            onClick={() => setIsLoginOpen(true)}
          >
            Akun
          </Button>
          <div className="w-[50px] sm:w-[60px]">
            <img
              alt="language"
              src="/flags/id.svg"
              className="shadow-sm"
            />
          </div>
        </div>
      </div>

      <PopupModal
        isOpen={isLoginOpen}
        onClose={() => setIsLoginOpen(false)}
        description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
      >
        <FormLogin
          setIsRegisterOpen={setIsRegisterOpen}
          setIsLoginOpen={setIsLoginOpen}
        />
      </PopupModal>

      <PopupModal
        isOpen={isRegisterOpen}
        onClose={() => setIsRegisterOpen(false)}
        description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
      >
        <FormRegister />
      </PopupModal>
    </>
  )
}