import React, { useState, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import Button from '@mui/material/Button';
import yzs from "./business/request.js";
import styles from './LoginPage.module.css';
import { useSelector, useDispatch } from 'react-redux'
import { setUdid, setFlushToken, setAccessToken, setUserInfo } from "./business/userSlice.js"
import logo from './assets/logo.png';
import { Container, Tab, Box } from '@mui/material';
import TabPanel from '@mui/lab/TabPanel';
import { TabList } from '@mui/lab';
import TabContext from '@mui/lab/TabContext';
import DynamicCodeForm from './components/DynamicCodeForm.js';
import PasswordForm from './components/PasswordForm.js';
import { useCookies } from 'react-cookie';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
    status: {
        danger: '#e53e3e',
    },
    palette: {
        primary: {
            main: '#FF595A',
            darker: '#FF595A',
        },
        neutral: {
            main: '#64748B',
            contrastText: '#fff',
        },
    },
});

export default function () {
    const navigate = useNavigate();
    const [cookies, setCookie] = useCookies(['accessToken']);
    const [value, setValue] = useState("1");
    const account = useSelector(state => state.user.account)
    const password = useSelector(state => state.user.password)

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    const accessToken = useSelector(state => state.user.accessToken)
    const flushToken = useSelector(state => state.user.flushToken)
    const udid = useSelector(state => state.user.udid)


    const dispatch = useDispatch()



    const debug_test = () => {
        console.log("accessToken", accessToken);
    }
    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(`account: ${account}\nPassword: ${password}  udid: ${udid}`);

        yzs.login(udid, account, password).then(token => {
            dispatch(setFlushToken(token));
            yzs.get_access_token(udid, token).then(token => {
                // yzs.update_access_token(ip.payload, token);
                dispatch(setAccessToken(token));
                setCookie("accessToken", token)
                yzs.get_user_info(udid, token).then(info => {
                    dispatch(setUserInfo(info));
                    yzs.user_select(udid, token).then(info => {
                        navigate("/");
                    })

                });
            })
        });


    };

    return (
        <div className={styles.loginPage}>
            <div className={styles.title}>
                <img className={styles.titleIcon} src={logo} />
                <h1 className={styles.titleText}>纽曼AI语记</h1>
            </div>

            <div className={styles.loginFrame}>
                <ThemeProvider theme={theme}>
                    <Container component="form" className={styles.form} onSubmit={handleSubmit}
                        sx={{
                            width: 360,
                            height: 418,
                            backgroundColor: 'white',
                            display: "flex",
                            flexDirection: "column",
                            justifyContent: "center",
                            alignItems: "center",
                            boxShadow: "0px 5px 20px 0px rgba(146,0,1,0.1)",
                            borderRadius: 4,

                        }}
                    >
                        <TabContext value={value}>
                            <Box>

                                <TabList

                                    aria-label="basic tabs example" value={value} onChange={handleChange} >
                                    <Tab label="手机动态码登录" value="1" />
                                    <Tab label="账号密码登录" value="2" />
                                </TabList>
                            </Box>

                            <TabPanel value="1" >
                                <DynamicCodeForm />
                            </TabPanel>
                            <TabPanel value="2" >
                                <PasswordForm />
                            </TabPanel>
                        </TabContext>



                    </Container>
                </ThemeProvider >
                <Button variant="contained" onClick={debug_test}>测试</Button>
            </div>


        </div>
    );
}