import {Button, Form, Divider, Modal, Row, Col, Space, Notification} from '@douyinfe/semi-ui'
import {useState} from "react";
import {useNavigate} from "react-router-dom";
import {useUserinfoStore} from "../store/userinfoStore.ts";

type FieldType = {
    account: string;
    password: string;
};

const {Input, Checkbox} = Form

export const LoginComponent = () => {

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

    const onFinish = async (values: FieldType) => {

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

    const [visible, setVisible] = useState(false);
    const hideModal = () => setVisible(false)

    return (<div>
        <Modal
            centered
            visible={visible}
            width={450}
            footer={null}
            maskClosable={false}
            title='登录'
            onCancel={hideModal}
        >
            <Form
                onSubmit={onFinish}
            >
                <Form.Input
                    field="username"
                    placeholder="请输入用户名"
                    noLabel
                    rules={[{required: true, message: '用户名不可空'}]}
                />
                <Form.Input
                    type="password"
                    field="password"
                    placeholder="请输入登录密码"
                    noLabel
                    rules={[{required: true, message: '密码不可空'}]}
                />
                <div className='flex align-center space-between'>
                    <Form.Checkbox
                        field="remember"
                        value={false}
                        noLabel
                    >下次自动登录</Form.Checkbox>
                    <Space>
                        <Button theme='light' onClick={hideModal}>取消</Button>
                        <Button type='primary' theme='solid' loading={loading} htmlType="submit">登录</Button>
                    </Space>
                </div>
            </Form>
            {/*<div style={{ padding: '30px 0 20px' }}>*/}
            {/*    <Divider>OR</Divider>*/}
            {/*    <div className="text-center" style={{ marginTop: 20 }}>*/}
            {/*        <Space>*/}
            {/*            <Button icon={<GoogleOutlined />}>GOOGLE</Button>*/}
            {/*            <Button theme='solid' type="primary" icon={<GithubOutlined />}>GITHUB</Button>*/}
            {/*        </Space>*/}
            {/*    </div>*/}
            {/*</div>*/}
        </Modal>
        {visible ? 'xxx' : '0000'}
        <Button type="primary" onClick={() => {
            setVisible(true)
            // Modal.success({ title: 'This is a success message', content: 'bla bla bla...' });
        }}>点击登录</Button>
    </div>)
}