import React, {useState} from 'react';
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined} from '@ant-design/icons';
import AdministrationIcon from '~/components/customIcon/AdministrationIcon';
import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon';
import ExaminationIcon from '~/components/customIcon/ExaminationIcon';
import CommunityIcon from '~/components/customIcon/CommunityIcon';
import NotificationIcon from '~/components/customIcon/NotificationIcon';
import {Layout, Menu, theme, Button, Modal, MenuProps} from 'antd';
import ProgressReviewTopSection from '~/components/ProgressReviewTopSection';
import ProgressReview from '~/components/ProgressReview';
import QuizzesScore from '~/components/QuizzesScore'
import YourCertificates from '~/components/YourCertificates'
import { Dropdown, Space } from 'antd';
import '../../public/assets/left_side_nav.css';
import LeftSideMenu from '~/components/LeftSideMenuItems';


const { Content, Sider } = Layout;

const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
  key,
  label: `navsd ${key}`,
}));

type MenuItem = Required<MenuProps>['items'][number];

const items: MenuProps['items'] = [
    {
      label: <a href="https://www.antgroup.com">1st menu item</a>,
      key: '01sd',
    },
    {
      type: 'divider',
    },
    {
      label: <a href="https://www.aliyun.com">2nd menu item</a>,
      key: '02sd',
    },
    {
      type: 'divider',
    },
    {
      label: '3rd menu item',
      key: '03sd',
    },
];

const App: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const [open, setOpen] = React.useState<boolean>(false);
    const [loading, setLoading] = React.useState<boolean>(true);

    const showLoading = () => {
        setOpen(true);
        setLoading(true);

        // Simple loading mock. You should add cleanup logic in real world.
        setTimeout(() => {
        setLoading(false);
        }, 100);
    };
    const { token: { colorBgContainer}, } = theme.useToken();

  return (
    <Layout>
        <Layout>
            <div >
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
                <div className='flex flex-col justify-center demo-logo-vertical'>
                    <div className='px-4'>
                        <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
                    </div>
                </div>
                <LeftSideMenu />
            </Sider>
            </div>
            <Layout style={{marginLeft: 366, background: '#FFF'}}>
                <Content style={{  overflow: 'initial',}}>
                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
                        <div className='container mx-auto flex flex-row justify-between pr-8'>
                            <div className='inline-flex justify-center place-items-center'>
                                <img src="../../assets/student-dash.svg" alt=""/>
                                <p className='pl-1 text-[18px] font-[700] whitespace-nowrap'>Student Dashboard</p>
                            </div>
                            <div>
                                <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
                                    <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
                                        <img src="../../assets/notification-bell.svg" alt="" />
                                    </div>
                                </Button>
                                <Dropdown menu={{ items }} trigger={['click']}>
                                    <a onClick={(e) => e.preventDefault()}>
                                    <Space>
                                        <div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
                                            <img src="/assets/man.png" alt="" />
                                            <div>
                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
                                            </div>
                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
                                        </div>
                                    </Space>
                                    </a>
                                </Dropdown>
                            </div>
                        </div>
                    </div>

                    {/* Place Content from here */}
                    <div>
                        <ProgressReviewTopSection />
                    </div>
                    <div className='grid grid-cols-1 xl:grid-cols-7 border-t-[1px] border-t-[#CFCFCF]'>
                        <div className='xl:col-span-5 border-r-[1px] border-r-[#CFCFCF]'>
                            <ProgressReview />
                        </div>
                        <div className="xl:col-span-2 p-4">
                            <QuizzesScore />

                            <YourCertificates />
                        </div>

                    </div>

                    <div>
                        
                    </div>
                </Content>
            </Layout>
        </Layout>
    </Layout>
  );
};
export default App;