import React, { Fragment,useEffect,useState } from 'react'
import Scrollbar from 'react-perfect-scrollbar'
import { MatxVerticalNav } from 'app/components'
import { makeStyles } from '@material-ui/core/styles'
import clsx from 'clsx'
import useSettings from 'app/hooks/useSettings'
import { useSelector } from 'react-redux'
import useAuth from 'app/hooks/useAuth'
import {navigationsAdmin,navigations}  from 'app/navigations'

const useStyles = makeStyles(({ palette, ...theme }) => ({
    scrollable: {
        paddingLeft: 20,
        paddingRight: 20,
    },
    sidenavMobileOverlay: {
        position: 'fixed',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        width: '100vw',
        background: 'rgba(0, 0, 0, 0.54)',
        zIndex: -1,
        [theme.breakpoints.up('lg')]: {
            display: 'none',
        },
    },
}))

const Sidenav = ({ children }) => {
    const classes = useStyles()
    const { settings, updateSettings } = useSettings()
    const [navigationUser,setNavigationUser]=useState([])
    //let navigation = useSelector(({ navigations }) => navigations)
    const { user } = useAuth()
    useEffect(()=>{
        getNavigationUser()
    },[])

    

    const getNavigationUser=()=>{
        if(user.is_sysadmin){
            setNavigationUser(navigationsAdmin)
        }else{
            console.log("user",user.user_permissions)

            if (user.user_permissions?.length > 0) {
                const newList = navigations.map((item) => {
                  //level 2
                  if (item.children) {
                    let flag = false;
                    let arrChild = item.children.map((child) => {
                      if (
                        user.user_permissions.findIndex((temp) => temp.function_code == child.id) !=
                        -1
                      ) {
                        flag = true;
                        return { ...child, hide: false };
                      }
                      return child;
                    });
                    if (flag) return { ...item, hide: false, children: arrChild };
                    return item;
                  } else {
                    //level 1
                    if (
                        user.user_permissions.findIndex((temp) => temp.function_code == item.id) != -1
                    )
                      return { ...item, hide: false };
                    return item;
                  }
                });

                setNavigationUser(newList);
              }



        }
        

    }


    const updateSidebarMode = (sidebarSettings) => {
        let activeLayoutSettingsName = settings.activeLayout + 'Settings'
        let activeLayoutSettings = settings[activeLayoutSettingsName]

        updateSettings({
            ...settings,
            [activeLayoutSettingsName]: {
                ...activeLayoutSettings,
                leftSidebar: {
                    ...activeLayoutSettings.leftSidebar,
                    ...sidebarSettings,
                },
            },
        })
    }

    return (
        <Fragment>
            <Scrollbar
                options={{ suppressScrollX: true }}
                className={clsx('relative px-4', classes.scrollable)}
            >
                {children}
                <MatxVerticalNav items={navigationUser} />
            </Scrollbar>

            <div
                onClick={() => updateSidebarMode({ mode: 'close' })}
                className={classes.sidenavMobileOverlay}
            />
           
        </Fragment>
    )
}

export default Sidenav
