import React from 'react'

/* Media */
import './auth-forgot.css'

/* Views & Components */


/* Models */


/* UI Framework */
import { Alert, Button, Pane, Text, TextInput } from 'evergreen-ui'




const ForgotForm = (props) => {
    const [email, setEmail] = React.useState()
    const [password, setPassword] = React.useState()
    const [passwordConfirmation, setPasswordConfirmation] = React.useState()
    const [token, setToken] = React.useState()
    const [status, setStatus] = React.useState({status: "ready"})

    let API_ENDPOINT = window.localStorage.chroma_endpoint || 'https://api.chroma.vision'

    const handleReset = (e) => {
        setStatus({status: "pending"})

        /* Make Authentication Socket Reqeust */
        fetch(API_ENDPOINT + `/verify/resetpassword/${email}`, {
            method: 'GET',
            // body: JSON.stringify(authRequest),
            headers: {'Content-Type': 'application/json;charset=utf-8'}
        })
        .then(res => res.json())
        .then(
            (result) => {
                if(result.status === "true"){ // will be true if successful
                    setStatus({status: "sent"})
                } else {
                    setStatus({status: "error", error: "Invalid Email"})
                }
        })
    }

    const handleResetFinish = (e) => {
        setStatus({status: "sent", statusFinish: "pending", error: "Passwords do not match"})

        /* Validate Data */
        if(password !== passwordConfirmation) {
            setStatus({status: "sent", statusFinish: "error", error: "Passwords do not match"})

            return
        }

        /* Make Authentication Socket Reqeust */
        fetch(API_ENDPOINT + `/verify/verifyresetpassword/${token}?password=${password}`, {
            method: 'GET',
            headers: {'Content-Type': 'application/json;charset=utf-8'}
        })
        .then(res => res.json())
        .then(
            (result) => {
                if(result.status === "true"){ // will be true if successful
                    setStatus({status: "sent", statusFinish: "complete"})
                } else {
                    setStatus({status: "sent", statusFinish: "error", error: "Invalid Token"})
                }
        })
    }

    return (
        <Pane className={`forgot-form ${status.status}`}>
            <Pane className="start">
                {/* Google */}
                <Text className="feedback">Enter your Email here to reset password</Text>

                {/* Feedback */}
                {status.status !== "error" ? "" : <Alert
                        appearance="card"
                        intent="danger"
                        title={status.error}
                    />}

                {/* Email */}
                <Pane>
                    <TextInput
                        name="text-input-email"
                        placeholder="Email"
                        onChange={event => setEmail(event.target.value)}
                    />
                </Pane>

                {/* Submit */}
                <Pane>
                    <Button className="button" appearance="primary" disabled={status.status === "pending" ? true : false} onClick={() => handleReset()}>Reset Password</Button>
                </Pane>

                <Pane className="clear" />
            </Pane> {/* End start reset password */}

            <Pane className={`reset ${status.statusFinish}`}>
                {/* Text */}
                <Text className="feedback">Enter the reset token sent to your Email & choose a new password</Text>

                {/* Feedback */}
                {status.statusFinish !== "error" ? "" : <Alert
                        appearance="card"
                        intent="danger"
                        title={status.error}
                    />}

                {/* Reset Token */}
                <Pane>
                    <TextInput
                        name="text-input-token"
                        placeholder="Reset Token"
                        onChange={event => setToken(event.target.value)}
                    />
                </Pane>

                 {/* Password */}
                 <Pane>
                    <TextInput
                        name="text-input-password"
                        placeholder="New Password"
                        onChange={event => setPassword(event.target.value)}
                    />
                </Pane>

                {/* Password Confirmation */}
                <Pane>
                    <TextInput
                        name="text-input-password"
                        placeholder="New Password Confirmation"
                        onChange={event => setPasswordConfirmation(event.target.value)}
                    />
                </Pane>

                {/* Submit */}
                <Pane>
                    <Button className="button" appearance="primary" disabled={status.statusFinish === "pending" ? true : false} onClick={() => handleResetFinish()}>Reset Password</Button>
                </Pane>

                <Pane className="clear" />

            </Pane> {/* End finish reset password */}

            <Pane className={`password-reset ${status.statusFinish}`}>
                 {/* Response */}
                 <Text className="feedback">Your password has been reset</Text>
            </Pane>
        </Pane>
    );
}

export default ForgotForm
