import React, { FC } from "react";
import classNames from "classnames";
import {
    atomsStore,
    CurrentDashboardSectionIdAtom,
    leftSidebarWidthAtom,
    MobileSidebarOpenAtom,
    ModelAtom, ModelBaseAtom,
    sidebarEdgeOffsetAtom
} from "./atoms";
import { useAtomValue } from "jotai";
import { TreeDashboardSection } from "./TreeDashboardSections";
import { useAtom } from "jotai/index";
import { EmulatedButton } from "./EmulatedButton";
import { __, CouponsPlus, hasProInstalled } from "../globals";
import { useIsMobile, useViewPortDimensionsStyle } from "./hooks";

export type TreeMenusProps = {}

export const TreeMenus: FC<TreeMenusProps> = ({ }) => {
    const width = useAtomValue(leftSidebarWidthAtom)
    const edgeOffset = useAtomValue(sidebarEdgeOffsetAtom)
    const [currentSectionId, setCurrentSectionId] = useAtom(CurrentDashboardSectionIdAtom)
    const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useAtom(MobileSidebarOpenAtom)
    const isMobile = useIsMobile()
    const { top: wpAdminBarTop, left: wpAdminMenuLeft } = useViewPortDimensionsStyle()

    const menuItems = [
        {
            id: TreeDashboardSection.Offers,
            label: __('Offers'),
            icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                stroke="currentColor" className="min-w-5 min-h-5 max-w-5 max-h-5">
                <path strokeLinecap="round" strokeLinejoin="round"
                    d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z" />
            </svg>
        },
        {
            id: TreeDashboardSection.Presets,
            label: __('Presets'),
            icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                stroke="currentColor" className="min-w-5 min-h-5 max-w-5 max-h-5">
                <path strokeLinecap="round" strokeLinejoin="round"
                    d="m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0-3-3m3 3 3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" />
            </svg>
        },
        {
            id: TreeDashboardSection.Url,
            label: 'URL',
            icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                stroke="currentColor" className="min-w-5 min-h-5 max-w-5 max-h-5">
                <path strokeLinecap="round" strokeLinejoin="round"
                    d="m6.115 5.19.319 1.913A6 6 0 0 0 8.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 0 0 2.288-4.042 1.087 1.087 0 0 0-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 0 1-.98-.314l-.295-.295a1.125 1.125 0 0 1 0-1.591l.13-.132a1.125 1.125 0 0 1 1.3-.21l.603.302a.809.809 0 0 0 1.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 0 0 1.528-1.732l.146-.292M6.115 5.19A9 9 0 1 0 17.18 4.64M6.115 5.19A8.965 8.965 0 0 1 12 3c1.929 0 3.716.607 5.18 1.64" />
            </svg>
        },
        {
            id: TreeDashboardSection.Advanced,
            label: __('Preferences'),
            icon: <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                stroke="currentColor" className="min-w-5 min-h-5 max-w-5 max-h-5">
                <path strokeLinecap="round" strokeLinejoin="round"
                    d="M4.5 12a7.5 7.5 0 0 0 15 0m-15 0a7.5 7.5 0 1 1 15 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077 1.41-.513m14.095-5.13 1.41-.513M5.106 17.785l1.15-.964m11.49-9.642 1.149-.964M7.501 19.795l.75-1.3m7.5-12.99.75-1.3m-6.063 16.658.26-1.477m2.605-14.772.26-1.477m0 17.726-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205 12 12m6.894 5.785-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495" />
            </svg>
        },
    ]

    const handleMenuItemClick = (id: TreeDashboardSection) => {
        setCurrentSectionId(id)
        if (isMobile) {
            setIsMobileSidebarOpen(false)
        }
    }

    const sidebarContent = (
        <>
            <ul className="flex flex-row gap-x-1">
                {menuItems.map(item => (
                    <li key={item.id} className={''}>
                        <EmulatedButton
                            className={classNames("relative w-full flex items-center gap-1 rounded-3 py-1 px-2 cursor-pointer font-regular text-base !m-0 transition-all ease", {
                                'text-gray-500 hover:bg-gray-300/10': item.id !== currentSectionId,
                                'bg-gray-300/20 text-gray-650': item.id === currentSectionId
                            })} onClick={() => handleMenuItemClick(item.id)}>
                            {false && item.id === currentSectionId && <div className="absolute w-full h-[1px] bg-gray-200 bottom-[-10px] translate-x-1/2 -left-1/2"></div>}
                            {item.icon}
                            <span>{item.label}</span>
                        </EmulatedButton>
                    </li>
                ))}
            </ul>
        </>
    )

    // Mobile: iOS-style bottom tab bar with frosted glass
    if (isMobile) {
        return (
            <div
                className="absolute bottom-0 left-0 right-0 z-[100000] flex items-center justify-around px-2 pt-2 pb-5"
                style={{
                    backgroundColor: 'rgba(249, 250, 251, 0.72)',
                    backdropFilter: 'saturate(180%) blur(20px)',
                    WebkitBackdropFilter: 'saturate(180%) blur(20px)',
                    borderTop: '0.5px solid rgba(0, 0, 0, 0.12)'
                }}
            >
                {menuItems.map(item => (
                    <button
                        key={item.id}
                        onClick={() => handleMenuItemClick(item.id)}
                        className={classNames(
                            "flex flex-col items-center gap-0.5 px-3 py-1.5 rounded-2 transition-all duration-200 min-w-[60px]",
                            {
                                "text-blue-normal": item.id === currentSectionId,
                                "text-gray-500": item.id !== currentSectionId,
                            }
                        )}
                    >
                        <div className={classNames("transition-transform duration-200", {
                            "scale-110": item.id === currentSectionId
                        })}>
                            {item.icon}
                        </div>
                        <span className="text-smaller-2 font-medium">{item.label}</span>
                    </button>
                ))}
            </div>
        )
    }

    // Desktop: Original Menus
    return sidebarContent

};


export const switchToClassic = () => {
    atomsStore.set(ModelAtom, 'classic')
}
const switchToLegacy = () => {
    atomsStore.set(ModelAtom, 'rows')
}