import * as React from 'react';
import { useNavigate } from "react-router-dom";
import { Chat } from './DeepSeekHomeChat';
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 }[]>([]);

    React.useEffect(() => {
        chatStore.clearSessions();
        setList([
            {
                title: '智能问答',
                onClick: () => {
                    navigate({ pathname: '/deepseekChat' })
                }
            },
            {
                title: '知识库问答',
                onClick: () => {
                    navigate({ pathname: '/knowledgeChat' })
                }
            },
            {
                title: '员工小百科',
            },
            {
                title: '报批报建助手',
            },
            {
                title: '施工方案审查',
            },
            {
                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-title2' style={{ marginBottom: isMobileScreen ? 10 : 35 }}>
                    智能问答助手
                </div>
                <div className={isMobileScreen ? 'deekSeek-content-mobile' : 'deekSeek-content-pc'}>
                    <Chat />
                </div>
            </div>
        </div>
    );
};

export default DeekSeek;