import Breadcrumb from "../components/Breadcrumbs";
import {
    Box,
    Button,
    Container,
    TextField,
    Typography,
    useMediaQuery
} from "@mui/material";
import UnstyledButtonCustom from "../components/MainButton";
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import {useState} from "react";
import Link from "react-router-dom/es/Link";
import {connect} from 'react-redux';
import {actionFullLogin, actionFullRegister} from "../actions/ActionLogin";
import Redirect from "react-router-dom/es/Redirect";

const MyAccountPage = ({auth, promise, user, onLogin, onRegister}) => {
    const matches = useMediaQuery('(max-width:899px)')
    const [status, setStatus] = useState('login')

    const Form = ({title, target, onClickEvent, children}) => {
        const matches2 = useMediaQuery('(max-width:450px)')

        const [valueLogin, setValueLogin] = useState('')
        const [valuePassword, setValuePassword] = useState('')
        const [flagLogin, setFlagLog] = useState(false)
        const [flagPassword, setFlagPass] = useState(false)

        return (
            <Box
                sx={{
                    backgroundColor: "#fff",
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                    padding: matches2 ? "30px 20px" : "40px 60px"
                }}
            >
                <Typography
                    variant='h4'
                    letterSpacing='10px'
                    marginBottom='30px'
                >
                    {title}
                </Typography>
                <TextField
                    id="login"
                    label="Login"
                    variant="standard"
                    type="text"
                    required
                    fullWidth
                    value={valueLogin}
                    onChange={e => {setValueLogin(e.target.value); setFlagLog(true)}}
                    error={flagLogin && (valueLogin.length < 3 || valueLogin.length > 20)}
                    sx={{marginBottom: '20px'}}
                />
                <TextField
                    id="password"
                    label="Password"
                    variant="standard"
                    type="password"
                    required
                    fullWidth
                    value={valuePassword}
                    onChange={e => {setValuePassword(e.target.value); setFlagPass(true)}}
                    error={flagPassword && (valuePassword.length < 3 || valuePassword.length > 20)}
                    sx={{marginBottom: '30px'}}
                />
                {children}
                <UnstyledButtonCustom
                    onClick={() => {
                        if(valuePassword.length >= 3 && valuePassword.length <= 20 &&
                            valueLogin.length >= 3 && valueLogin.length <= 20) {
                            onClickEvent(valueLogin, valuePassword)
                        }
                    }}
                    text={title}
                />
                <Box
                    width='100%'
                    display='flex'
                    justifyContent='flex-end'
                    marginTop='20px'
                >
                    <Button
                        onClick={() => setStatus(target)}
                    >
                        {target}
                        <ArrowForwardIosIcon/>
                    </Button>
                </Box>
            </Box>
        )
    }

    return (
        <>
            <Breadcrumb links={['my account']}/>
            <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0"}}>
                <Container maxWidth="sm">
                    {(auth?.payload && Object.keys(user).length !== 0) ? <Redirect to={'/profile'}/>:
                        status === 'login' ?
                            <Form title={'LOGIN'} target={'register'} onClickEvent={onLogin} children={
                                <>
                                    {promise?.login?.status === "RESOLVED" &&
                                        <Typography
                                            variant='body2'
                                            color='red'
                                            marginBottom='20px'
                                        >
                                            This user does not exist
                                        </Typography>
                                    }
                                </>
                            }/> :
                            <Form title={'REGISTER'} target={'login'} onClickEvent={onRegister} children={
                                <>
                                    <Typography
                                        variant='body2'
                                        color='#616161'
                                        textAlign='justify'
                                        marginBottom='40px'
                                    >
                                        Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our
                                        <Link style={{textDecoration: 'none'}} to='/privacy-policy'> privacy policy</Link>
                                        .
                                    </Typography>
                                    {promise?.register?.status === "RESOLVED" &&
                                        <Typography
                                            variant='body2'
                                            color='red'
                                            marginBottom='20px'
                                        >
                                            Such user already exists
                                        </Typography>
                                    }
                                </>
                            }/>
                    }
                </Container>
            </main>
        </>
    )
}
const CLoginForm = connect(state => ({auth: state.auth, promise: state.promise, user: state.user}), {onLogin: actionFullLogin, onRegister: actionFullRegister})(MyAccountPage)

export default CLoginForm