import React, {useState} from 'react';
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, DownOutlined} from '@ant-design/icons';
import Icon 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 { Dropdown, Space } from 'antd';
import '../../public/assets/ss1.css';

let courseData = [
    {
      id : "1",
      title : "Life History of Dr. Maria Montessori",
      chapter : "1",
      Program : "Graduate Program",
      img : "../../assets/course-blank.jpg"
    },
      {
      id : "2",
      title : "Introduction to Montessori Methods",
      chapter : "2",
      Program : "Graduate Program",
      img : "../../assets/course-blank.jpg"
    },
    {
      id : "3",
      title : "Exercises on Practical Life",
      chapter : "3",
      Program : "Graduate Program",
      img : "../../assets/course-blank.jpg"
    }
  ]

const { Header, Content, Sider } = Layout;

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

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


const items2: MenuProps['items'] = [
    {
        key: 'subx1',
        icon: <AdministrationIcon />,
        label: 'Administration',
        children: [
            {
            key: '1x',
            label: (<a href='#'>Class Schedules</a>),
            },
            {
            key: '2x',
            label: (<a href='#'>Classmate Directory</a>),
            },
            {
            key: '3x',
            label: (<a href='#'>Qualifications</a>),
            },
        ],
    },
    {
        key: 'subx2',
        icon: <MyCoursesIcon />,
        label: 'My Courses',
        children: [
            {
            key: '4x',
            label: (<a href='#'>Graduate Program</a>),
            },
            {
            key: '5x',
            label: (<a href='#'>Post-Graduate Program</a>),
            },
        ],
    },
    {
        key: 'subx3',
        icon: <ExaminationIcon />,
        label: 'Examinations',
        children: [
            {
            key: '6x',
            label: (<a href='#'>Exam Scheduled</a>),
            },
            {
            key: '7x',
            label: (<a href='#'>Upcoming Exam</a>),
            },
            {
            key: '8x',
            label: (<a href='#'>Passed Exam</a>),
            },
        ],
    },
    {
        key: 'subx4',
        icon: <CommunityIcon />,
        label: 'Community',
        children: [
        {
            key: '9x',
            label: (<a href='#'>Exam Scheduled</a>),
        },
        {
            key: '10x',
            label: (<a href='#'>Upcoming Exam</a>),
        },
        {
            key: '11x',
            label: (<a href='#'>Passed Exam</a>),
        },
        ],
    },
    {
        key: 'subx5',
        icon: <NotificationIcon />,
        label: 'Notifications',
        children: [
            {
            key: '12x',
            label: (<a href='#'>Exam Scheduled</a>),
            },
            {
            key: '13x',
            label: (<a href='#'>Upcoming Exam</a>),
            },
            {
            key: '14x',
            label: (<a href='#'>Passed Exam</a>),
            },
        ],
    },
    // getItem('Files', '9', <FileOutlined />),
    {
        key: 'grp',
        label: '',
        type: 'group',
        style: { marginTop: '100px' },
        children: [
        {   
            key: '15x', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
            icon: React.createElement(SettingOutlined, { style: { color: '#FFF' } }), 
            label: (<h2 className='text-[18px] font-[700] text-[#FFF]'>Settings</h2>)
        },
        {
            key: '16x', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
            icon: React.createElement(QuestionCircleOutlined, { style: { color: '#FFF' } }),
            label: (<h2 className='text-[18px] font-[700] text-[#FFF]'>Help & Support</h2>)
        },
        {
            key: '17x', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
            icon: React.createElement(LogoutOutlined, { style: { color: '#FFF' } }),
            label: (<h2 className='text-[18px] font-[700] text-[#FFF]'>Logout</h2>)
        },     
        ],
    },
];
const items: MenuProps['items'] = [
    {
      label: <a href="https://www.antgroup.com">1st menu item</a>,
      key: '01',
    },
    {
      type: 'divider',
    },
    {
      label: <a href="https://www.aliyun.com">2nd menu item</a>,
      key: '02',
    },
    {
      type: 'divider',
    },
    {
      label: '3rd menu item',
      key: '03',
    },
  ];

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>
        <>
            {/* <Button type="primary" onClick={showLoading}>Open Modal</Button> */}
            <Modal style={{top: '20px', right: '0px'}} title={<p>Loading Modal</p>} footer={ <Button type="primary" onClick={showLoading}> Reload </Button>} loading={loading} open={open} onCancel={() => setOpen(false)} >
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
            </Modal>
        </>
        {/* <Header style={{ display: 'flex', alignItems: 'center' }}>
            <div className="demo-logo" />
            <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} style={{ flex: 1, minWidth: 0 }} />
        </Header> */}
        <Layout>
            <div >
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={310} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: 'linear-gradient(180deg, #2F1B08D6 0%, #000000D6 83.93%)', 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-[#FFF]'>IIMTT Logo</h1>    
                        <a href="#" className='flex flex-row justify-between border-[1px] border-[#E9E9E9] rounded-[10px] p-2  place-items-center'>
                            <img className='w-[46px] h-[46px]' src="/assets/man.png" alt="" />
                            <div>
                                <p className='text-[16px] font-[500] text-[#D0D0D0]'>My Profile</p>
                                <p className='text-[22px] font-[700] text-[#FFF]'>Rayan Holiday</p>
                            </div>
                            <img className='' src="../../assets/right-arrow.svg" alt="" />
                        </a>
                    </div>
                </div>
                <Menu className='custom-menu' mode="inline"  style={{ height: '100%', borderRight: 0, paddingTop: 30, background: 'transparent'}} items={items2} />
            </Sider>
            </div>
            {/* defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} */}
            <Layout style={{marginLeft: 310}}>
                <Content style={{  overflow: 'initial',}}>
                    <div className='border-b-[1px] py-2'>
                        <div className='container mx-auto  flex flex-row justify-between'>
                            <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]'>
                                        <svg  viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M5.06445 20.2658V18.2111H7.1191V11.0198C7.1191 9.59872 7.54715 8.33597 8.40325 7.2316C9.25935 6.12723 10.3723 5.40382 11.742 5.06138V4.34225C11.742 3.9142 11.8919 3.55036 12.1915 3.25072C12.4911 2.95109 12.855 2.80127 13.283 2.80127C13.7111 2.80127 14.0749 2.95109 14.3746 3.25072C14.6742 3.55036 14.824 3.9142 14.824 4.34225V5.06138C16.1938 5.40382 17.3067 6.12723 18.1628 7.2316C19.0189 8.33597 19.447 9.59872 19.447 11.0198V18.2111H21.5016V20.2658H5.06445ZM13.283 23.3477C12.718 23.3477 12.2343 23.1465 11.8319 22.7442C11.4296 22.3418 11.2284 21.8581 11.2284 21.2931H15.3377C15.3377 21.8581 15.1365 22.3418 14.7341 22.7442C14.3318 23.1465 13.8481 23.3477 13.283 23.3477ZM9.17374 18.2111H17.3923V11.0198C17.3923 9.88979 16.99 8.9224 16.1852 8.11766C15.3805 7.31293 14.4131 6.91056 13.283 6.91056C12.153 6.91056 11.1856 7.31293 10.3808 8.11766C9.57611 8.9224 9.17374 9.88979 9.17374 11.0198V18.2111Z" fill="black"/>
                                            <circle cx="19.4462" cy="19.2384" r="4.23771" fill="#FF0000" stroke="#fff" strokeWidth="2.31148"/>
                                        </svg>
                                    </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>
                                            <DownOutlined style={{ fontSize: '12px' }} />
                                        </div>
                                    </Space>
                                    </a>
                                </Dropdown>
                            </div>
                        </div>
                    </div>
                    <section className=''>
                        <div className='container mx-auto '>
                            <h2 className='text-[20px] font-[700] my-4 inline-flex leading-[24px]'>Course Content <img src="../../assets/right-arrow.svg" alt="" /></h2>
                            <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
                                {courseData.map(data=>(
                                    <div className=''>
                                        <img className='w-full rounded-[10px]' src={data.img} alt="" />
                                        <h2 className='text-[16px] font-[700] my-2'>{data.title}</h2>
                                        <p className='text-[14px] font-[500] text-[#6E6E6E]'>
                                            <span>Chapter {data.chapter}</span> &#8226; &nbsp;
                                            <span>{data.Program}</span>
                                        </p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </section>
                    <section className='container mx-auto  my-16'>
                        <div className='grid grid-cols-1 lg:grid-cols-3 gap-6'>
                            <div className='flex flex-col md:col-span-2 gap-6'>
                                <div className='flex flex-col xl:flex-row gap-6'>
                                    <div className='border-[1px] border-[#E9E9E9] w-full bg-[#FCFCFC] rounded-[10px] '>
                                        <div className='flex flex-row justify-between border-b-[1px] border-[#E9E9E9]'>
                                            <h2 className='text-[20px] font-[700] p-4'>Attendance</h2>
                                            <img src="../../assets/right-arrow.svg" alt="" />
                                        </div>
                                        <p className='text-center py-20'>Graph</p>
                                    </div>
                                    <div className='border-[1px] border-[#E9E9E9] w-full bg-[#FCFCFC] rounded-[10px]'>
                                        <div className='flex flex-row justify-between border-b-[1px] border-[#E9E9E9]'>
                                            <h2 className='text-[20px] font-[700] p-4'>Upcoming Classes</h2>
                                            <img src="../../assets/right-arrow.svg" alt="" />
                                        </div>
                                        <div className='flex flex-col space-y-16'>
                                            <div className='border-b-[1px] border-[#CFCFCF]'></div>
                                            <div className='border-b-[1px] border-[#CFCFCF]'></div>
                                            <div className='border-b-[1px] border-[#CFCFCF]'></div>
                                        </div>
                                    </div>
                                </div>
                                <div className='border-[1px] border-[#E9E9E9] w-full bg-[#FCFCFC] rounded-[10px]'>
                                    <h2 className='text-[20px] font-[700] p-4 border-b-[1px] border-[#E9E9E9]'>Accomplishments / Qualifications</h2>
                                    <div className='flex flex-row justify-between p-6 overflow-x-auto'>
                                        <img className='' src="../../assets/rectangle.jpg" alt="" />
                                        <img className='' src="../../assets/rectangle.jpg" alt="" />
                                        <img className='' src="../../assets/rectangle.jpg" alt="" />
                                        <img className='' src="../../assets/rectangle.jpg" alt="" />
                                        <img className='' src="../../assets/rectangle.jpg" alt="" />
                                        <img className='' src="../../assets/rectangle.jpg" alt="" />
                                        <img className='' src="../../assets/rectangle.jpg" alt="" />
                                    </div>
                                </div>
                            </div>
                            <div className='md:col-span-1 border-[1px] border-[#E9E9E9] w-full bg-[#FCFCFC] rounded-[10px]'>
                                <h2 className='text-[20px] font-[700] p-4 border-b-[1px] border-[#E9E9E9]'>Upcoming Tests</h2>
                                <div className='flex flex-col'>
                                    <div className='p-4 border-b-[1px] border-[#CFCFCF]'>
                                        <img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
                                    </div>
                                    <div className='p-4 border-b-[1px] border-[#CFCFCF]'>
                                        <img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
                                    </div>
                                    <div className='p-4 border-b-[1px] border-[#CFCFCF]'>
                                        <img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
                                    </div>
                                    <div className='p-4 border-b-[1px] border-[#CFCFCF]'>
                                        <img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
                                    </div>
                                    <div className='p-4 border-b-[1px] border-[#CFCFCF]'>
                                        <img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
                                    </div>
                                    <div className='p-4 border-b-[1px] border-[#CFCFCF]'>
                                        <img className='h-[44px] w-[79px]' src="../../assets/rectangle.jpg" alt="" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>                         
                </Content>
            </Layout>
        </Layout>
    </Layout>
  );
};

export default App;