import React, { useState } from 'react';
import { Link } 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,
    MobileOutlined,
    WarningOutlined,
    LineChartOutlined,
    FileTextOutlined,
    BellOutlined,
    AlertOutlined,
    SafetyOutlined,
    TeamOutlined,
    ClockCircleOutlined,
    CalendarOutlined,
    UsergroupAddOutlined
} 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: 'master',
        icon: <DatabaseOutlined style={{fontSize:'19px'}} />,
        label: 'Master',
        children: [
            {
                key: 'master-plant-section',
                icon: <ProductOutlined style={{fontSize:'19px'}} />,
                label: <Link to="/master/plant-section">Plant Section</Link>,
            },
            {
                key: 'master-device',
                icon: <MobileOutlined style={{fontSize:'19px'}} />,
                label: <Link to="/master/device">Device</Link>,
            },
            {
                key: 'master-tag',
                icon: <TagOutlined style={{fontSize:'19px'}} />,
                label: <Link to="/master/tag">Tag</Link>,
            },
            {
                key: 'master-brand-device',
                icon: <AntDesignOutlined style={{fontSize:'19px'}} />,
                label: <Link to="/master/brand-device">Brand Device</Link>,
            },
            {
                key: 'master-error-code',
                icon: <WarningOutlined style={{fontSize:'19px'}} />,
                label: <Link to="/master/error-code">Error Code</Link>,
            },
            {
                key: 'master-status',
                icon: <SafetyOutlined style={{fontSize:'19px'}} />,
                label: <Link to="/master/status">Status</Link>,
            },
        ],
    },
    {
        key: 'history',
        icon: <HistoryOutlined style={{fontSize:'19px'}} />,
        label: 'History',
        children: [
            {
                key: 'history-trending',
                icon: <LineChartOutlined style={{fontSize:'19px'}} />,
                label: <Link to="/history/trending">Trending</Link>,
            },
            {
                key: 'history-report',
                icon: <FileTextOutlined style={{fontSize:'19px'}} />,
                label: <Link to="/history/report">Report</Link>,
            },
        ],
    },
    {
        key: 'notification',
        icon: <BellOutlined style={{fontSize:'19px'}} />,
        label: <Link to="/notification" className='fontMenus'>Notifikasi</Link>,
    },
    {
        key: 'event-alarm',
        icon: <AlertOutlined style={{fontSize:'19px'}} />,
        label: <Link to="/event-alarm" className='fontMenus'>Event Alarm</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: 'shift-management',
        icon: <ClockCircleOutlined style={{fontSize:'19px'}} />,
        label: 'Manajemen Shift',
        children: [
            {
                key: 'shift-schedule',
                icon: <CalendarOutlined style={{fontSize:'19px'}} />,
                label: <Link to="/shift-management/schedule">Jadwal Shift</Link>,
            },
            {
                key: 'shift-member',
                icon: <UsergroupAddOutlined style={{fontSize:'19px'}} />,
                label: <Link to="/shift-management/member">Anggota Shift</Link>,
            },
        ],
    },
];

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

    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}
            defaultSelectedKeys={['home']}
            openKeys={stateOpenKeys}
            onOpenChange={onOpenChange}
            style={{
                background: 'transparent',
                color: 'white',
                border: 'none',
            }}
            theme="dark"
            className="custom-orange-menu"
        />
    );
};
export default LayoutMenu;