import React from 'react'
import {validateEmail, Validation} from "./validate.js";
import {useShopStore} from "./shop_store";

/**
 * Components that renders the form to request quote.
 */
export function OrderForm() {
    const {
        email,
        note,
        isProcessing,
        isProcessingComplete,
        showDescription,
        updateEmail,
        updateNote,
        submitForm,
    } = useShopStore(state => ({
        email: state.email,
        note: state.note,
        isProcessing: state.isProcessing,
        isProcessingComplete: state.isProcessingComplete,
        showDescription: state.showDescription,
        updateEmail: state.updateEmail,
        updateNote: state.updateNote,
        submitForm: state.submitForm,
    }));


    return (
        <div className="summary-form">

            <form onSubmit={submitForm} noValidate>

                <input
                    className={`${email.error > 0 ? 'errorField' : ''}`}
                    type="email"
                    placeholder="Email"
                    onChange={(event) => updateEmail(event.target.value)}
                    onBlur={(event) => updateEmail(event.target.value)}
                    value={email.value}/>

                {email.error === Validation.Empty ? (
                    <div className="error">
                        <small>Required</small>
                    </div>
                ) : null}

                {email.error === Validation.Invalid ? (
                    <div className="error">
                        <small>Your email is incomplete</small>
                    </div>
                ) : null}

                <textarea
                    onChange={(event) => updateNote(event.target.value)}
                    defaultValue={note.value}
                    rows="5"
                    placeholder="Additional notes"/>

                <div className="d-flex flex-column flex-sm-row justify-content-between">
                    <input
                        className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
                        style={{'cursor': 'pointer', 'fontWeight': '700'}}
                        defaultValue="Show JSON"
                        onClick={showDescription}
                        readOnly={true}/>

                    <input className="btn btn-primary w-100 m-0 ms-sm-2" type="submit"
                           value={`${isProcessing ? 'Processing ...' : 'Request quote'}`}/>
                </div>
                {/*This will open an email window. Send the email to make your request.*/}
            </form>

        </div>
    );

}