import React from "react";
import { SettingOutlined, QuestionCircleOutlined, LogoutOutlined, RightOutlined } from '@ant-design/icons';
import { Layout, Menu, theme, Button, Modal, MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { Calendar, Col, Row, Typography } from 'antd';
import type { CalendarProps } from 'antd';
import type { Dayjs } from 'dayjs';
import dayLocaleData from 'dayjs/plugin/localeData';
import { Content } from "antd/es/layout/layout";
import '../../public/assets/left_side_nav.css';

dayjs.extend(dayLocaleData);

const App: React.FC = () => {


    const { token } = theme.useToken();

    const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
        console.log(value.format('YYYY-MM-DD'), mode);
    };

    const wrapperStyle: React.CSSProperties = {
        width: 320,
        border: `1px solid ${token.colorBorderSecondary}`,
        borderRadius: token.borderRadiusLG,
        padding: 16,
    };

    const headerStyle: React.CSSProperties = {
        display: 'flex',
        justifyContent: 'space-around',
        alignItems: 'center',
        // marginBottom: 16,
        backgroundColor: '#0752bc',
        height: 47,
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,

    };


    const titleStyle: React.CSSProperties = {
        fontSize: 14,
        fontWeight: 'bold',
        color: '#fff',
    };

    const navButtonStyle: React.CSSProperties = {
        cursor: 'pointer',
        fontSize: 16,
    };


    return (
        <>

            <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-[350px_1fr]">
                <div className=" p-4">
                    <div className="grid grid-rows-2">
                        <div className="mb-4 bg-card bg-gray-200 rounded-lg shadow-md border border-zinc-300 dark:bg-card-foreground">
                            <Calendar
                                fullscreen={false}
                                headerRender={({ value, onChange }) => {
                                    const monthFormat = 'MMMM';
                                    const year = value.year();
                                    const month = value.format(monthFormat);

                                    const prevMonth = () => {
                                        const newValue = value.clone().subtract(1, 'month');
                                        onChange(newValue);
                                    };

                                    const nextMonth = () => {
                                        const newValue = value.clone().add(1, 'month');
                                        onChange(newValue);
                                    };

                                    return (
                                        <div style={headerStyle}>
                                            <div className="">
                                                <div style={titleStyle}>{`${month} ${year}`}</div>
                                            </div>
                                            <div className="flex gap-8">
                                                <div style={navButtonStyle} onClick={prevMonth}>{'<'}</div>
                                                <div style={navButtonStyle} onClick={nextMonth}>{'>'}</div>
                                            </div>
                                        </div>


                                    );

                                }}

                                onPanelChange={onPanelChange}
                            />
                        </div>
                        <div className="">
                            <div className="bg-card h-80 bg-gray-200 rounded-lg shadow-md border border-zinc-300 dark:bg-card-foreground">
                                <div className="flex justify-around items-center h-12 border-b-2 border-zinc-300 bg-[#0752bc] rounded-t-lg">
                                    {/* <h2 className="text-lg items-center font-semibold text-foreground dark:text-card-foreground">Upcoming Classes</h2> */}
                                    <h2 style={titleStyle}>Upcoming Classes <span>&gt;</span></h2>
                                </div>
                                <div className=" ">
                                    <div className="border-b-2 border-zinc-300 pb-12">
                                    </div>
                                    <div className="border-b-2 border-zinc-300 pb-12">
                                    </div>
                                    <div className="border-b-2 border-zinc-300 pb-12">
                                    </div>
                                    <div className="border-b-2 border-zinc-300 pb-12">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className=" p-4 border-l-[1px] py-2 border-[#CFCFCF]">
                    <div className='xl:col-span-4'>

                        <div className="p-4 bg-background">
                            <h2 className="text-lg font-semibold mb-4 border-b-[1px] py-2 border-[#CFCFCF]">Today's Schedule</h2>
                            <div className="space-y-2">

                                <div className="flex ">
                                    <span className="w-16 text-zinc-700">9 AM</span>
                                    <div className="flex-1 bg-blue-200 p-2 border-l-4 border-indigo-600 rounded-r-lg ">
                                        <span>Lorem Ipsum</span><br />
                                        <span className="text-sm text-zinc-500">9 - 10 AM</span>
                                    </div>
                                </div>
                                <div className="flex ">
                                    <span className="w-16 text-zinc-700">10 AM</span>
                                    <div className="flex-1 bg-blue-200 p-2 border-l-4 border-orange-600 rounded-r-lg">
                                        <span>Lorem Ipsum</span><br />
                                        <span className="text-sm text-zinc-500">10 - 11 AM</span>
                                    </div>
                                </div>
                                <div className="flex ">
                                    <span className="w-16 text-zinc-700">11 AM</span>
                                    <div className="flex-1"></div>
                                </div>
                                <div className="flex ">
                                    <span className="w-16 text-zinc-700">12 PM</span>
                                    <div className="flex-1  p-2 border-l-4 border-indigo-600 rounded-r-lg">
                                        <span>Lorem Ipsum dolor sit</span><br />
                                        <span className="text-sm text-zinc-500">11:30 AM - 12:30 PM</span>
                                    </div>
                                </div>
                                <div className="flex  mb-8">
                                    <span className="w-16 text-zinc-700">1 PM</span>
                                    <div className="flex-1  p-2 border-l-4 border-green-600 rounded-r-lg">
                                        <span>Lorem Ipsum</span><br />
                                        <span className="text-sm text-zinc-500">11:30 AM - 12:30 PM</span>
                                    </div>
                                </div>

                                <div className="flex ">
                                    <span className="w-16 text-zinc-700">2 PM</span>
                                    <div className="flex-1  p-2 border-l-4 border-red-700 rounded-r-lg">
                                        <span>Lorem Ipsum dolor sit</span><br />
                                        <span className="text-sm text-zinc-500">11:30 AM - 12:30 PM</span>
                                    </div>
                                </div>
                                <div className="flex ">
                                    <span className="w-16 text-zinc-700">3 PM</span>
                                    <div className="flex-1  p-2 border-l-4 border-blue-700 rounded-r-lg">
                                        <span>Lorem Ipsum dolor sit</span><br />
                                        <span className="text-sm text-zinc-500">11 AM - 12:30 PM</span>
                                    </div>
                                </div>
                                <div className="flex">
                                    <span className="w-16 text-zinc-700">4 PM</span>
                                    <div className="flex-1 bg-blue-200 p-2 border-l-4 border-sky-700 rounded-r-lg">
                                        <span>Lorem Ipsum</span><br />
                                        <span className="text-sm text-zinc-500">11:30 AM - 12:30 PM</span>
                                    </div>
                                </div>
                                <div className="flex ">
                                    <span className="w-16 text-zinc-700">5 PM</span>
                                    <div className="flex-1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>


    )
}
export default App;