import React, {useEffect, useRef, useState} from "react";
import {IconGithubLogo, IconWeibo} from "@douyinfe/semi-icons";
import css from './index.module.scss'
import {LoginComponent} from "../../components/LoginComponent.tsx";
import {useNavigate} from "react-router-dom";
import {useUserinfoStore} from "../../store/userinfoStore.ts";
import {Button, Divider, Form, Modal, Notification, Space} from "@douyinfe/semi-ui";
import {cx} from "@emotion/css";

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

    const [loading, setLoading] = useState(false);
    const navigate = useNavigate();
    const {login, userinfo} = useUserinfoStore()

    const onFinish = async (values: any) => {
        setLoading(true);
        try {
            const user = await login(values)
            navigate('/dashboard')
        } catch (err) {
            // 登录失败
            console.log(err)
            // 登录失败
            Notification.error({
                content: '登录失败，请检查用户名和密码',
                position: 'top',
                // duration: 2,
            })
        }
        setLoading(false);
    };


    useEffect(() => {
        if (userinfo && userinfo.id > 0) {
            navigate('/dashboard')
        }
    }, [userinfo])

    return (<div className={css.index}>
        {/*<LoginComponent/>*/}
        <div className={css.loginWrapper}>
            <h2 className={cx('text-center', css.title)}>登录</h2>
            <Form
                onSubmit={onFinish}
            >
                <Form.Input
                    field="account"
                    placeholder="请输入用户名"
                    noLabel
                    rules={[{required: true, message: '用户名不可空'}]}
                />
                <Form.Input
                    type="password"
                    field="password"
                    placeholder="请输入登录密码"
                    noLabel
                    rules={[{required: true, message: '密码不可空'}]}
                />
                <Form.Checkbox
                    field="remember"
                    value={false}
                    noLabel
                >下次自动登录</Form.Checkbox>
                <div className='flex align-center space-between'>
                    <Button block type='primary' theme='solid' loading={loading} htmlType="submit">登录</Button>
                </div>
            </Form>
            <div style={{padding: '30px 0 20px'}}>
                <Divider>OR</Divider>
                <div className="text-center" style={{marginTop: 20}}>
                    <Space>
                        <Button icon={<IconWeibo/>}>GOOGLE</Button>
                        <Button theme='solid' type="primary" icon={<IconGithubLogo/>}>GITHUB</Button>
                    </Space>
                </div>
            </div>
        </div>
    </div>);
}
export default DefaultPage;