import React, { useRef } from 'react';
import { Button, Layout, Menu, Typography } from 'antd';
import 'antd/dist/antd.css';
import { CompassOutlined, DashboardOutlined, KeyOutlined, CalendarOutlined, BookOutlined, BarChartOutlined, ReadOutlined, NotificationOutlined, MenuOutlined, RightOutlined, LeftOutlined } from '@ant-design/icons';
import { Link, NavLink } from 'react-router-dom';
import { authenticationService } from "../../_services";

import { ReactComponent as DashboardIcon } from '../assets/image/sider-icon/dashboard.svg';
import { ReactComponent as QuestionIcon } from '../assets/image/sider-icon/question.svg';
import { ReactComponent as QuizIcon } from '../assets/image/sider-icon/quizexam.svg';
import { ReactComponent as PracticeIcon } from '../assets/image/sider-icon/practice.svg';
import { ReactComponent as BatchIcon } from '../assets/image/sider-icon/batch.svg';
import { ReactComponent as ClassesIcon } from '../assets/image/sider-icon/classes.svg';
import { ReactComponent as PerfIcon } from '../assets/image/sider-icon/performance.svg';

import OdiSVG from '../assets/image/GrayscalePKLogo.svg'
import './Main.css';
import Sidebar from '../Sidebar';
import MediaQuery from 'react-responsive';
// import { set } from 'lodash';



const { SubMenu } = Menu;
const { Sider } = Layout;

const rootSubmenuKeys = ['question', 'quiz', 'practice', 'batches', 'classes', 'performance'];
const questionItems = ['allQuestions', 'myQuestions', 'addQuestion', 'bookmarkQuestions', 'draftQuestions'];
const quizItems = ['createExam', 'liveExam', 'upcomingExam', 'expiredExams', 'draftExams'];
const practiceItems = ['createPractise', 'livePractise', 'upcomingPractise', 'draftPractise'];
const batchesItems = ['createbatch', 'viewbatch'];
const classesItems = ['class', 'viewclass'];

export function Siderc(props) {

	const [collapse, setCollapse] = React.useState(false);
	const [state, setState] = React.useState({ current: 'dashboard' });
	const [openKeys, setOpenKeys] = React.useState([]);
	const set = useRef(false);


	const handleClick = e => {
		setState({ current: e.key });
	}

	React.useEffect(() => {
		let item;
		const key = props.location?.pathname.split('/')[1];
		if (!set.current && props.location?.pathname.split('/')[1] === 'dashboard') {
			setState({ current: 'dashboard' });
			set.current = true;
		}
		if (!set.current) {
			for (item of questionItems) {
				if (set.current) break;
				selectMenuKey(key, item, rootSubmenuKeys[0], set);
			}
		}
		if (!set.current) {
			for (item of quizItems) {
				if (set.current) break;
				selectMenuKey(key, item, rootSubmenuKeys[1], set);
			}
		}
		if (!set.current) {
			for (item of practiceItems) {
				if (set.current) break;
				selectMenuKey(key, item, rootSubmenuKeys[2], set);
			}
		}
		if (!set.current) {
			for (item of batchesItems) {
				if (set.current) break;
				selectMenuKey(key, item, rootSubmenuKeys[3], set);
			}
		}
		if (!set.current) {
			for (item of classesItems) {
				if (set.current) break;
				selectMenuKey(key, item, rootSubmenuKeys[4], set);
			}
		}
		return;
	}, [props.location?.pathname]);

	React.useEffect(() => {
		set.current = false;
	}, [props.location?.pathname]);

	function selectMenuKey(location, item, submenu, set) {
		if (!set.current && location === item) {
			// setOpenKeys(prev => [...prev, submenu]);
			subMenuOpen({ key: submenu, fromLink: true });
			setState({ current: props.location?.pathname.split('/')[props.location?.pathname.split('/').length - 1] });
			set.current = true;
		}
	}

	function subMenuOpen({ key, fromLink = false }) {
		const ar = openKeys;
		const res = ar.findIndex(item => item === key);
		if (res === -1) {
			setOpenKeys(prev => [...prev, key]);
		}
		if (res > -1 && !fromLink) {
			const newAr = ar.filter((_, indx) => indx !== res);
			setOpenKeys(_ => [...newAr]);
		}
	}

	return (
		<Sidebar className={"main-sider-menu"} collapse={collapse} control={() => setCollapse(prev => (!prev))}
			otherStyles={{borderTopRightRadius: "40px", borderBottomRightRadius: "40px"}}>
			<MediaQuery maxWidth={992}>
				<Button type={"text"}
					data-collapse-check={collapse? "0": "1"} 
					className='slider-trigger-button' 
					onClick={() => setCollapse(prev => (!prev))}
				>
					{/* {collapse?<RightOutlined />: <LeftOutlined />} */}
					<RightOutlined />
				</Button>
			</MediaQuery>
			<Sider breakpoint="lg"
				collapsed={false}
				className="sidebar">
				<div className="logo" style={{}}>
					<a className='center-flex ml-3-5'>
						<img src={OdiSVG} alt="PracticeKea" style={{ height: "50%" }} />
						<Typography.Title level={4} style={{ marginBlock: 0, marginLeft: 10, color: '#fff' }}>PracticeKea</Typography.Title>
					</a>
				</div>
				{authenticationService.currentUserValue?.role_id !== 4 ?

					<Menu
						mode="inline"
						onClick={handleClick}
						selectedKeys={[state.current]}
						openKeys={openKeys}
						style={{ height: '100%' }}
					>
						<Menu.Item key="dashboard" icon={<DashboardIcon />}> <NavLink to="/dashboard">Dashboard</NavLink></Menu.Item>
						<SubMenu key="question" icon={<QuestionIcon />} title="Question" onTitleClick={subMenuOpen}>
							{authenticationService.currentUserValue?.role_id === 2 && <Menu.Item key="allQuestions">  <NavLink to="/allQuestions">All Questions</NavLink></Menu.Item>}
							<Menu.Item key="myQuestions"> <Link to="/myQuestions">My Questions</Link></Menu.Item>
							<Menu.Item key="addQuestion"> <Link to="/addQuestion">Create Question</Link></Menu.Item>
							<Menu.Item key="bookmarkQuestions"><Link to="/bookmarkQuestions">Bookmarked</Link></Menu.Item>
							<Menu.Item key="draftQuestions"> <Link to="/draftQuestions">Draft Questions</Link></Menu.Item>
						</SubMenu>
						<SubMenu key="quiz" icon={<QuizIcon />} title="Quiz/Exam" onTitleClick={subMenuOpen}>
							<Menu.Item key="createExam"><Link to="/createExam">Create Exam</Link></Menu.Item>
							<Menu.Item key="liveExam"><Link to="/liveExam">Live Exams</Link></Menu.Item>
							<Menu.Item key="upcomingExam"><Link to="/upcomingExam">Upcoming Exams</Link></Menu.Item>
							<Menu.Item key="expiredExams"><Link to="/expiredExams">Expired Exams</Link></Menu.Item>
							<Menu.Item key="draftExams"><Link to="/draftExams">Draft Exams</Link></Menu.Item>
						</SubMenu>

						<SubMenu key="practice" icon={<PracticeIcon />} title="Practice" onTitleClick={subMenuOpen}>
							<Menu.Item key="createPractise"><Link to="/createPractise">Create Practise</Link></Menu.Item>
							<Menu.Item key="draftPractise"><Link to="/draftPractise">Draft Practises</Link></Menu.Item>
							<Menu.Item key="livePractise"><Link to="/livePractise">Live Practises</Link></Menu.Item>
							<Menu.Item key="upcomingPractise"><Link to="/upcomingPractise">Upcoming Practises</Link></Menu.Item>
						</SubMenu>


						{authenticationService.currentUserValue?.role_id === 2 && <SubMenu key="batches" icon={<BatchIcon />} title="Batch" onTitleClick={subMenuOpen}>
							<Menu.Item key="createbatch" icon={<ReadOutlined />}> <Link to="/createbatch">Create Batch</Link></Menu.Item>
							<Menu.Item key="viewbatch" icon={<ReadOutlined />}> <Link to="/viewbatch">View All Batch</Link></Menu.Item>
						</SubMenu>}
						{authenticationService.currentUserValue?.role_id === 2 && <SubMenu key="classes" icon={<ClassesIcon />} title="Classes" onTitleClick={subMenuOpen}>
							{/* <Menu.Item key="viewClass" icon={<ReadOutlined />}> <Link to="/classes">Student Class</Link></Menu.Item> */}
							<Menu.Item key="class" icon={<ReadOutlined />}> <Link to="/class">Create Class</Link></Menu.Item>
							<Menu.Item key="viewclass" icon={<ReadOutlined />}> <Link to="/viewclass">View All Class</Link></Menu.Item>
						</SubMenu>}

						<SubMenu key="performance" icon={<PerfIcon />} title="Performance" onTitleClick={subMenuOpen}>
							{/* <Menu.Item key="9">option9</Menu.Item>
                <Menu.Item key="10">option10</Menu.Item>
                <Menu.Item key="11">option11</Menu.Item>
                <Menu.Item key="12">option12</Menu.Item> */}
						</SubMenu>
					</Menu> :
					<Menu
						mode="inline"
						onClick={handleClick}
						selectedKeys={[state.current]}
						defaultOpenKeys={['dashboard']}
						style={{ height: '100%', borderRight: '0px solid #f0f2f5' }}
					>
						<Menu.Item key="dashboard" icon={<DashboardOutlined />}> <Link to="/dashboard">Dashboard</Link></Menu.Item>
						<SubMenu key="question" icon={<CompassOutlined />} title="Question">
							<Menu.Item key="4">Bookmarked</Menu.Item>

						</SubMenu>
						<SubMenu key="quiz" icon={<KeyOutlined />} title="Quiz/Exam">
							<Menu.Item key="8"><Link to="/liveExams">Live Exams</Link></Menu.Item>
							<Menu.Item key="9"><Link to="/upcomingExams">Upcoming Exams</Link></Menu.Item>

						</SubMenu>
						<SubMenu key="practice" icon={<BookOutlined />} title="Practice">
							<Menu.Item key="9"><Link to="/practiceExams">Practice Exams</Link></Menu.Item>
						</SubMenu>
						<SubMenu key="calendar" icon={<CalendarOutlined />} title="Calendar">
							<Menu.Item key="14">option9</Menu.Item>
							<Menu.Item key="15">option10</Menu.Item>
							<Menu.Item key="16">option11</Menu.Item>
							<Menu.Item key="17">option12</Menu.Item>
						</SubMenu>
					</Menu>
				}
			</Sider>
		</Sidebar>
	);


}
