import * as React from 'react';
import { useNavigate } from "react-router-dom";
import { Dropdown, Spin } from 'antd';
import { Chat } from './DeepSeekChat';
import whiteLogo from "../icons/whiteLogo.png";
import jkxz from "../icons/jkxz.png";
import { useChatStore } from "../store";
import { useMobileScreen } from '../utils';
import api from "@/app/api/api";
import './deepSeekHome.scss';

const DeekSeek: React.FC = () => {
    const chatStore = useChatStore();
    const isMobileScreen = useMobileScreen();

    const navigate = useNavigate();

    const [listLoading, setListLoading] = React.useState(false);

    type List = {
        title: string,
        children: {
            title: string,
            showMenu: string,
            chatMode: string,
            appId: string,
        }[],
    }[];

    const [list, setList] = React.useState<List>([]);

    const init = async () => {
        setListLoading(true);
        try {
            const res = await api.get('/deepseek/api/appType');
            setList(res.data);
        } catch (error) {
            console.error(error);
        } finally {
            setListLoading(false);
        }
    }

    React.useEffect(() => {
        chatStore.clearSessions();
        const userInfo = localStorage.getItem('userInfo');

        if (userInfo) {
            init();
        }
    }, []);

    return (
        <Spin spinning={listLoading}>
            <div className='deekSeek'>
                <div className='deekSeek-header' style={{ justifyContent: isMobileScreen ? 'flex-start' : 'center' }}>
                    <div style={{ display: 'flex', alignItems: 'center', margin: '0 20px' }}>
                        <img src={whiteLogo.src} style={{ width: 20, marginRight: 10 }} />
                        <div style={{ whiteSpace: 'nowrap' }}>
                            上海建科
                        </div>
                    </div>
                    {
                        list.map((item, index) => {
                            return <Dropdown
                                menu={{
                                    items: item.children.map((child, i) => {
                                        return {
                                            key: i,
                                            label: child.title,
                                            onClick: () => {
                                                const search = `?showMenu=${child.showMenu}&chatMode=${child.chatMode}&appId=${child.appId}`;
                                                navigate({
                                                    pathname: '/knowledgeChat',
                                                    search: search,
                                                })
                                            },
                                        };
                                    })
                                }}
                                key={index}
                            >
                                <div style={{ whiteSpace: 'nowrap', marginRight: 20, color: '#98b4fa', cursor: 'pointer' }}>
                                    {item.title}
                                </div>
                            </Dropdown>
                        })
                    }
                    <div style={{ whiteSpace: 'nowrap', marginRight: 20, color: '#98b4fa', cursor: 'pointer' }} onClick={() => {
                        navigate({
                            pathname: '/deepseekChat',
                        })
                    }}>
                        DeepSeek问答
                    </div>
                </div>
                <div className='deekSeek-content'>
                    <div className='deekSeek-content-title'>
                        <img src={jkxz.src} />
                    </div>
                    <div className='deekSeek-content-title-sm' style={{ marginBottom: isMobileScreen ? 14 : 36 }}>
                        智能问答助手
                    </div>
                    <div className={isMobileScreen ? 'deekSeek-content-mobile' : 'deekSeek-content-pc'}>
                        <Chat />
                    </div>
                </div>
            </div>
        </Spin>
    );
};

export default DeekSeek;