import * as React from 'react';
import { useNavigate } from "react-router-dom";
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 './deepSeekHome.scss';

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

    const navigate = useNavigate();

    const [list, setList] = React.useState<{ title: string, onClick?: () => void }[]>([]);

    const URLSearchParams = '?showMenu=false&chatMode=LOCAL';

    React.useEffect(() => {
        chatStore.clearSessions();
        setList([
            {
                title: '智能问答',
                onClick: () => {
                    navigate({ pathname: '/deepseekChat' })
                }
            },
            {
                title: '知识库问答',
                onClick: () => {
                    navigate({ pathname: '/knowledgeChat' })
                }
            },
            {
                title: '数字系统答疑',
                onClick: () => {
                    navigate({
                        pathname: '/knowledgeChat',
                        search: URLSearchParams + '&appId=2919668410128666624'
                    })
                }
            },
            {
                title: '员工入职小百科',
                onClick: () => {
                    navigate({
                        pathname: '/knowledgeChat',
                        search: URLSearchParams + '&appId=2919677614293913600'
                    })
                }
            },
            {
                title: '钢结构智能监理',
                onClick: () => {
                    navigate({
                        pathname: '/knowledgeChat',
                        search: URLSearchParams + '&appId=2920304945362505728'
                    })
                }
            },
            {
                title: '更多',
            }
        ])
    }, []);

    return (
        <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 <div style={{ whiteSpace: 'nowrap', marginRight: 20, color: '#98b4fa', cursor: 'pointer' }} onClick={item.onClick} key={index}>
                            {item.title}
                        </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>
    );
};

export default DeekSeek;