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/`, {
            method: 'POST',
            body: JSON.stringify({email: email}),
            headers: {'Content-Type': 'application/json;charset=utf-8'}
        })
        .then(res => res.json())
        .then(
            (result) => {
                console.log('forgot result', result)
                console.log('forgot message', result.message)
                
                if(result.status === "true"){ // will be true if successful
                    setStatus({status: "sent"})
                } else {
                    setStatus({status: "error", error: result.message || "Invalid Email"})
                }
        })
    }

    // May be able to remove this?
    // const handleResetFinish = (e) => {
    //     setStatus({status: "sent", statusFinish: "pending", error: ""})

    //     /* 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">
                <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 */}

            {/* Password Reset View */}
            <Pane className={`reset ${status.statusFinish}`}>
                <Text className="feedback">Instructions to reset your password have been sent to the provided email</Text>
            </Pane> 
        </Pane>
    )
}

export default ForgotForm
