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();
        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;