import React, {useState} from 'react'
import {BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
import Paper from '@material-ui/core/Paper';
import styled from 'styled-components'
import ValidateUserInput from '../Components/HelperFunctions/FormValidationFunction.js'
import Default from '../Components/PasswordRecoveryComponents/Default.js'
import Success from '../Components/PasswordRecoveryComponents/Success.js'
import CaseError from '../Components/PasswordRecoveryComponents/Error.js'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
import {axiosPostRequest} from '../Components/HelperFunctions/getAxiosConfig'

export default function PasswordRecoveryPage (props) {

    const [formEmail, setEmail] = useState(
        {
            key : false,
            value : ""

        }
    )

    const handleChange = (e) => {
        const userInput = e.target.value
        const flag = ValidateUserInput('email', userInput)

        setEmail({...formEmail,
            key : flag,
            value : userInput
        })
    }

    const [aux, setCase] = useState('default')
    const handleChangeSwitch = (value) => {
        console.log(value)
        if (value !== "success") {
            setEmail({key : false, value : ""})
        }
        setCase(value)
    };

    function handleSuccessfulSubmit (data) {
        handleChangeSwitch((data.success ? "success" : "error"))
    }
    const onSubmit = (e) => {
        e.stopPropagation()

        const url = `/auth/password`

        const payload = {
            "email" : formEmail.value,
            "redirect_url" : "https://plataformaintegrada.mec.gov.br/recuperar-senha#/alterar-senha"
        }

        axiosPostRequest(url, payload, handleSuccessfulSubmit, (error) => {console.log(error)})

    }


    const components = {
        default : <Default handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/>,
        success : <Success email={formEmail.value} changeSwitch={handleChangeSwitch}/>,
        error : <CaseError handleChange={handleChange} onSubmit={onSubmit} value={formEmail.value} error={formEmail.key}/>
    }

    const switchFunction = (value) => {
        switch(value) {
            case 'success':
                return components.success;
            case 'error':
                return components.error;
            default:
                return components.default

            }
    }

    return (
        <>
            <BackgroundDiv>
                <div style={{minWidth:"1170px"}}>
                    <CustomizedBreadcrumbs
                        values={["Recuperar senha"]}
                    />
                </div>

                <div style={{justifyContent:"center", textAlign:"center", maxWidth:"600px", margin:"auto"}}>
                <Paper elevation={3}>
                    <CardDiv>
                            {switchFunction(aux)}
                    </CardDiv>
                </Paper>
                </div>
            </BackgroundDiv>
        </>
    )
}

const CardDiv = styled.div`
    background-color : #fff;
    box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    padding : 30px 60px;
    margin : 50px 0;
`