import { montserratFont } from '@/app/layout'
import { Tab, VerticalTabs } from '@/components/Tabs/VerticalTabs'
import { toRelativePath } from '@/lib/utils'
import { IconMenu2, IconMenu3, IconX } from '@tabler/icons-react'

export const revalidate = 10

const Navbar = ({ menuData }: { menuData: any }) => {
    return (
        <div className={`max-w-5xl drawer ${montserratFont.className}`}>
            <input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
            <div className="drawer-content flex flex-col">
                {/* Navbar */}
                <div className="navbar p-0! w-full">
                    <div className="lg:hidden p-2 space-x-4 flex items-center w-full">
                        <div className='h-8 w-auto flex justify-center items-center'>
                            <img className='h-full w-full object-cover' src={'/лого-без-надписи-300x300.png'} />
                        </div>
                        <span className='text-base font-bold text-white'>ГУП «ЖКХ РС(Я)»</span>

                        <label htmlFor="my-drawer-2" aria-label="open sidebar" className="ml-auto btn btn-square btn-ghost text-white">
                            <IconMenu2 />
                        </label>
                    </div>

                    <div className="hidden flex-none lg:block">
                        <ul className="menu menu-horizontal">
                            <ul className='menu menu-horizontal relative w-full sm:p-0!'>
                                {menuData.length > 0 && menuData.map((menu: Tab) => {
                                    if (menu.items.length === 0) {
                                        return (
                                            <li key={menu.menu_item_id} tabIndex={0} className='text-white'>
                                                <a href={(menu.custom_url && toRelativePath(menu.custom_url)) || menu.slug}>
                                                    {menu.menu_title || menu.actual_post_title}
                                                </a>
                                            </li>
                                        )
                                    } else {
                                        return (
                                            <div key={menu.menu_item_id} className="dropdown dropdown-hover">
                                                <li tabIndex={0} className='text-white'>
                                                    <a>
                                                        <span className='w-4 h-4 flex justify-center items-center'>
                                                            <IconMenu3 className='' />
                                                        </span>
                                                        {menu.actual_post_title}
                                                    </a>
                                                </li>

                                                <ul tabIndex={0} className="dropdown-content menu z-1 min-w-[calc(100vw/2)] mt-0 p-0 py-2">
                                                    <VerticalTabs tabs={menu.items} defaultTab={menu.items[0].menu_item_id} />
                                                </ul>
                                            </div>
                                        )
                                    }

                                })}
                            </ul>
                        </ul>
                    </div>
                </div>
            </div>
            <div className="drawer-side">
                <label htmlFor="my-drawer-2" aria-label="close sidebar" className="drawer-overlay">
                </label>
                <ul className="text-[#0063A7] menu bg-base-200 min-h-full w-full sm:max-w-80 p-2 text-base">
                    {/* Sidebar content here */}
                    <div className='p-2 space-x-4 flex items-center'>
                        <div className='h-8 w-auto flex justify-center items-center'>
                            <img className='h-full w-full object-cover' src={'/gup_2022_jemblema.png'} />
                        </div>
                        <span className='text-base font-bold'>ГУП «ЖКХ РС(Я)»</span>
                        <label htmlFor='my-drawer-2' aria-label="close sidebar" className='btn btn-ghost btn-square ml-auto'>
                            <IconX />
                        </label>
                    </div>
                    {menuData.length > 0 && menuData.map((menu: Tab) => {
                        if (menu.items.length === 0) {
                            return (
                                <li key={menu.menu_item_id} tabIndex={0} className='border-b border-base-300 rounded-none'>
                                    <a className='py-3 font-semibold' href={(menu.custom_url && toRelativePath(menu.custom_url)) || menu.slug}>{menu.menu_title || menu.actual_post_title}</a>
                                </li>
                            )
                        } else {
                            return (
                                <details key={menu.menu_item_id} className="collapse collapse-arrow border-b border-base-300 rounded-none" name={`${menu.menu_item_id}-root`}>
                                    <summary className="collapse-title p-3 uppercase font-semibold">
                                        {menu.actual_post_title}
                                    </summary>

                                    <div className="collapse-content flex flex-col">
                                        {menu.items.map((item: Tab) => (
                                            <details key={item.menu_item_id} className="collapse collapse-arrow border-b border-base-300 rounded-none" name={menu.menu_item_id}>
                                                <summary className="collapse-title uppercase font-semibold">
                                                    {item.actual_post_title}
                                                </summary>
                                                <div className="collapse-content flex flex-col menu w-full">
                                                    {item.items.map((subItem: Tab) => (
                                                        <li key={subItem.menu_item_id} className='border-b border-base-300 rounded-none'>
                                                            <a href={(subItem.custom_url && toRelativePath(subItem.custom_url)) || subItem.slug} className="py-3 text-base font-medium">
                                                                {subItem.menu_title || subItem.actual_post_title}
                                                            </a>
                                                        </li>
                                                    ))}
                                                </div>
                                            </details>
                                        ))}
                                    </div>

                                </details>
                            )
                        }

                    })}
                </ul>
            </div>
        </div>
    )

    return (
        <div className={`${montserratFont.className} text-white relative max-w-5xl w-full px-0 py-2`}>
            <label className="btn btn-ghost btn-square swap swap-rotate">
                {/* this hidden checkbox controls the state */}
                <input type="checkbox" />

                <IconMenu2 className='swap-off fill-current' />

                <IconX className='swap-on fill-current' />
            </label>
        </div>
    )

    return (
        <div className={`navbar max-w-5xl relative w-full ${montserratFont.className} sm:p-0!`}>
            <ul className='menu menu-horizontal relative w-full sm:p-0!'>
                {menuData.length > 0 && menuData.map((menu: Tab) => {
                    if (menu.items.length === 0) {
                        return (
                            <li key={menu.menu_item_id} tabIndex={0} className='text-white'>
                                <a href={(menu.custom_url && toRelativePath(menu.custom_url)) || menu.slug}>{menu.menu_title || menu.actual_post_title}</a>
                            </li>
                        )
                    } else {
                        return (
                            <div key={menu.menu_item_id} className="dropdown dropdown-hover">
                                <li tabIndex={0} className='text-white'>
                                    <a>{menu.actual_post_title}</a>
                                </li>

                                <ul tabIndex={0} className="dropdown-content menu z-1 min-w-[calc(100vw/2)] mt-0 p-0 py-2">
                                    <VerticalTabs tabs={menu.items} defaultTab={menu.items[0].menu_item_id} />
                                </ul>
                            </div>
                        )
                    }

                })}
            </ul>
        </div>
    )
}

export default Navbar