import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Menu, Typography, Image } from 'antd';
import { getSessionData } from '../components/Global/Formatter';
import {
    HomeOutlined,
    DatabaseOutlined,
    SettingOutlined,
    UserOutlined,
    AntDesignOutlined,
    ShoppingCartOutlined,
    ShoppingOutlined,
    HistoryOutlined,
    DollarOutlined,
    RollbackOutlined,
    ProductOutlined,
    TagOutlined,
    AppstoreOutlined,
    MobileOutlined,
    WarningOutlined,
    LineChartOutlined,
    FileTextOutlined,
    BellOutlined,
    AlertOutlined,
    SafetyOutlined,
    TeamOutlined,
    ClockCircleOutlined,
    CalendarOutlined,
    DesktopOutlined,
    NodeExpandOutlined,
    GroupOutlined,
    SlidersOutlined,
    SnippetsOutlined,
} from '@ant-design/icons';

const { Text } = Typography;

const allItems = [
    {
        key: 'home',
        icon: <HomeOutlined style={{ fontSize: '19px' }} />,
        label: (
            <Link to="/dashboard/home" className="fontMenus">
                Home
            </Link>
        ),
    },
    {
        key: 'dashboard-svg',
        icon: <GroupOutlined style={{ fontSize: '19px' }} />,
        label: 'Dashboard',
        children: [
            {
                key: 'dashboard-svg-overview',
                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/dashboard-svg/overview">Overview</Link>,
            },
            {
                key: 'dashboard-svg-compressor-a',
                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/dashboard-svg/compressor-a">Compressor A</Link>,
            },
            {
                key: 'dashboard-svg-compressor-b',
                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/dashboard-svg/compressor-b">Compressor B</Link>,
            },
            {
                key: 'dashboard-svg-compressor-c',
                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/dashboard-svg/compressor-c">Compressor C</Link>,
            },
            {
                key: 'dashboard-svg-airdryer-a',
                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/dashboard-svg/airdryer-a">Air Dryer A</Link>,
            },
            {
                key: 'dashboard-svg-airdryer-b',
                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/dashboard-svg/airdryer-b">Air Dryer B</Link>,
            },
            {
                key: 'dashboard-svg-airdryer-c',
                icon: <NodeExpandOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/dashboard-svg/airdryer-c">Air Dryer C</Link>,
            },
        ],
    },
    {
        key: 'master',
        icon: <DatabaseOutlined style={{ fontSize: '19px' }} />,
        label: 'Master',
        children: [
            {
                key: 'master-plant-sub-section',
                icon: <ProductOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/master/plant-sub-section">Plant Sub Section</Link>,
            },
            {
                key: 'master-brand-device',
                icon: <AntDesignOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/master/brand-device">Brand Device</Link>,
            },
            {
                key: 'master-device',
                icon: <MobileOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/master/device">Device</Link>,
            },
            {
                key: 'master-unit',
                icon: <AppstoreOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/master/unit">Unit</Link>,
            },
            {
                key: 'master-tag',
                icon: <TagOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/master/tag">Tag</Link>,
            },
            {
                key: 'master-status',
                icon: <SafetyOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/master/status">Status</Link>,
            },
            {
                key: 'master-shift',
                icon: <ClockCircleOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/master/shift">Shift</Link>,
            },
        ],
    },
    {
        key: 'report',
        icon: <SnippetsOutlined style={{ fontSize: '19px' }} />,
        label: 'Report',
        children: [
            {
                key: 'report-trending',
                icon: <LineChartOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/report/trending">Trending</Link>,
            },
            {
                key: 'report-report',
                icon: <FileTextOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/report/report">Report</Link>,
            },
        ],
    },
    {
        key: 'history',
        icon: <HistoryOutlined style={{ fontSize: '19px' }} />,
        label: 'History',
        children: [
            {
                key: 'history-alarm',
                icon: <AlertOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/history/alarm">Alarm</Link>,
            },
            {
                key: 'history-event',
                icon: <SlidersOutlined style={{ fontSize: '19px' }} />,
                label: <Link to="/history/event">Event</Link>,
            },
        ],
    },
    {
        key: 'notification',
        icon: <BellOutlined style={{ fontSize: '19px' }} />,
        label: (
            <Link to="/notification" className="fontMenus">
                Notification
            </Link>
        ),
    },
    {
        key: 'role',
        icon: <SafetyOutlined style={{ fontSize: '19px' }} />,
        label: (
            <Link to="/role" className="fontMenus">
                Role
            </Link>
        ),
    },
    {
        key: 'user',
        icon: <UserOutlined style={{ fontSize: '19px' }} />,
        label: (
            <Link to="/user" className="fontMenus">
                User
            </Link>
        ),
    },
    {
        key: 'jadwal-shift',
        icon: <CalendarOutlined style={{ fontSize: '19px' }} />,
        label: (
            <Link to="/jadwal-shift" className="fontMenus">
                Jadwal Shift
            </Link>
        ),
    },
];

const LayoutMenu = () => {
    const location = useLocation();
    const [stateOpenKeys, setStateOpenKeys] = useState(['home']);
    const [selectedKeys, setSelectedKeys] = useState(['home']);

    // Function to get menu key from current path
    const getMenuKeyFromPath = (pathname) => {
        // Remove leading slash and split path
        const pathParts = pathname.replace(/^\//, '').split('/');

        // Handle different route patterns
        if (pathname === '/dashboard/home') return 'home';
        if (pathname === '/user') return 'user';
        if (pathname === '/role') return 'role';
        if (pathname === '/notification') return 'notification';
        if (pathname === '/jadwal-shift') return 'jadwal-shift';

        // Handle master routes
        if (pathname.startsWith('/master/')) {
            const subPath = pathParts[1];
            return `master-${subPath}`;
        }

        // Handle dashboard svg routes
        if (pathname.startsWith('/dashboard-svg/')) {
            const subPath = pathParts[1];
            return `dashboard-svg-${subPath}`;
        }

        // Handle report routes
        if (pathname.startsWith('/report/')) {
            const subPath = pathParts[1];
            return `report-${subPath}`;
        }

        // Handle history routes
        if (pathname.startsWith('/history/')) {
            const subPath = pathParts[1];
            return `history-${subPath}`;
        }

        return 'home'; // default
    };

    // Function to get parent key from menu key
    const getParentKey = (key) => {
        if (key.startsWith('master-')) return 'master';
        if (key.startsWith('dashboard-svg-')) return 'dashboard-svg';
        if (key.startsWith('report-')) return 'report';
        if (key.startsWith('history-')) return 'history';
        return null;
    };

    // Update selected and open keys when route changes
    useEffect(() => {
        const currentKey = getMenuKeyFromPath(location.pathname);
        setSelectedKeys([currentKey]);

        const parentKey = getParentKey(currentKey);

        // If current menu has parent, open it. Otherwise, close all dropdowns
        if (parentKey) {
            setStateOpenKeys([parentKey]);
        } else {
            setStateOpenKeys([]);
        }
    }, [location.pathname]);

    const getLevelKeys = (items1) => {
        const key = {};
        const func = (items2, level = 1) => {
            items2.forEach((item) => {
                if (item.key) {
                    key[item.key] = level;
                }
                if (item.children) {
                    func(item.children, level + 1);
                }
            });
        };
        func(items1);
        return key;
    };

    const levelKeys = getLevelKeys(allItems);

    const onOpenChange = (openKeys) => {
        const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);
        if (currentOpenKey !== undefined) {
            const repeatIndex = openKeys
                .filter((key) => key !== currentOpenKey)
                .findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]);
            setStateOpenKeys(
                openKeys
                    .filter((_, index) => index !== repeatIndex)
                    .filter((key) => levelKeys[key] <= levelKeys[currentOpenKey])
            );
        } else {
            setStateOpenKeys(openKeys);
        }
    };

    const session = getSessionData();
    const isAdmin = session?.user?.user_id;

    const karyawan = () => {
        return allItems
            .filter(
                (item) => item.key !== 'setting'
                // tambahkan menu jika terdapat menu yang di sembunyikan dari user karyawan
                // && item.key !== 'master'
                // && item.key !== 'master'
            )
            .map((item) => {
                if (item.key === 'master') {
                    return {
                        ...item,
                        // buka command dibawah jika terdapat sub menu yang di sembunyikan
                        // children: item.children.filter(
                        //     child => child.key !== 'master-product'
                        // tambahkan menu jika terdapat menu yang di sembunyikan dari user karyawan
                        //     && child.key !== 'master-service'
                        // )
                    };
                }
                return item;
            });
    };
    const items = isAdmin === 1 ? allItems : karyawan();

    return (
        <Menu
            mode="inline"
            items={items}
            selectedKeys={selectedKeys}
            openKeys={stateOpenKeys}
            onOpenChange={onOpenChange}
            style={{
                background: 'transparent',
                color: 'white',
                border: 'none',
            }}
            theme="dark"
            className="custom-orange-menu"
        />
    );
};
export default LayoutMenu;