import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import React, { useState } from "react";
import { connect } from "react-redux";
import { Field, formValueSelector, reduxForm } from "redux-form";

import RegisterFormCheck from "./registerCheck";
import RegisterComplete from "./registerComplete";

const RenderTextfield = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    type,
    errorMsg,
    disabled,
    meta: { touched, error },
    ...custom
}) => {
    return (
        <>
            <div className="govuk-form-group ">
                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
                    {label}
                </label>
                <div>
                    <input
                        {...input}
                        className={className}
                        name={name}
                        id={id}
                        type={type}
                        disabled={disabled}
                    />
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message govuk-form-group--error"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {touched &&
                                ((error && (
                                    <span>{errorMsg ? errorMsg : error}</span>
                                )) ||
                                    (warning && <span>{warning}</span>))}
                        </span>
                    )}
                </div>
            </div>
        </>
    );
};

const RegisterForm = (props) => {
    const {
        handleSubmit,
        pristine,
        valid,
        value,
        setRegisterFormComplete,
        setAccountCreatedComplete,
        loggedInUserEmail,
        emailaddress1
    } = props;
    let { t, lang } = useTranslation();

    const router = useRouter();
    const { locale } = router;

    let errorsobj = {};

    const emailRegex =
        /(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;

    const required = (value) =>
        value
            ? undefined
            : t("account:register-new-account-postcode-label-errormsg");
    const email = (value) =>
        value && !emailRegex.test(value) ? "Invalid email address" : undefined;
    const phoneNumber = (value) =>
        value &&
        !/^(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?(?:\(?0\)?[\s-]?)?)|(?:\(?0))(?:(?:\d{5}\)?[\s-]?\d{4,5})|(?:\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3}))|(?:\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4})|(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}))(?:[\s-]?(?:x|ext\.?|\#)\d{3,4})?$/i.test(
            value
        )
            ? "Invalid phone number"
            : undefined;

    const passwordsMatch = (value, allValues) =>
        value !== allValues.pinswg_custom_password
            ? "Passwords don't match"
            : undefined;

    const minLength = (min) => (value) =>
        value && value.length < min
            ? `Must be ${min} characters or more`
            : undefined;
    const minLength5 = minLength(5);

    const postcode = (value) =>
        value &&
        !/^([A-Z][A-HJ-Y]?[0-9][A-Z0-9]? ?[0-9][A-Z]{2}|GIR ?0A{2})$/i.test(
            value
        )
            ? t("account:register-new-account-postcode-invalid-label-errormsg")
            : undefined;

    const [hasErrors, setHasErrors] = useState("");

    const onHandleSubmit = (values) => {
        setRegisterFormComplete(true);
    };

    return (
        <>
            {!pristine && !valid && (
                <div>
                    <span
                        id={"summary-error"}
                        className="govuk-error-message govuk-form-group--error-summary"
                    >
                        <span className="govuk-visually-hidden">Error:</span>{" "}
                        <span className="govuk-error-exclamation">
                            There are errors on this page. Please correct any
                            required fields and submit again.
                        </span>
                    </span>
                </div>
            )}

            {props.accountCreatedComplete != true ? (
                props.registerFormComplete == false ? (
                    <form onSubmit={handleSubmit(onHandleSubmit)}>
                        <div className="card" id="personalDetailsCard">
                            <div className="card-body">
                                <fieldset className="govuk-fieldset">
                                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
                                        <h2 className="govuk-fieldset__heading">
                                            {t(
                                                "account:register-new-account-sub-heading-1"
                                            )}{" "}
                                            {loggedInUserEmail}
                                        </h2>
                                    </legend>
                                    <Field
                                        name="firstname"
                                        id="firstname"
                                        component={RenderTextfield}
                                        type="text"
                                        className="govuk-input govuk-input--width-20"
                                        validate={[required]}
                                        label={t(
                                            "account:register-new-account-first-name-label"
                                        )}
                                        errorMsg={t(
                                            "account:register-new-account-first-name-label-errormsg"
                                        )}
                                    />
                                    <Field
                                        name="lastname"
                                        id="lastname"
                                        component={RenderTextfield}
                                        type="text"
                                        className="govuk-input govuk-input--width-20"
                                        validate={[required]}
                                        label={t(
                                            "account:register-new-account-last-name-label"
                                        )}
                                        errorMsg={t(
                                            "account:register-new-account-last-name-label-errormsg"
                                        )}
                                    />
                                    <Field
                                        name="emailaddress1"
                                        id="emailaddress1"
                                        component={RenderTextfield}
                                        type="email"
                                        className="govuk-input govuk-input--width-20"
                                        validate={[required, email]}
                                        label={t(
                                            "account:register-new-account-email-address-label"
                                        )}
                                        disabled
                                    />
                                    <Field
                                        name="telephone1"
                                        id="telephone1"
                                        component={RenderTextfield}
                                        type="text"
                                        className="govuk-input govuk-input--width-20"
                                        validate={[required, phoneNumber]}
                                        label={t(
                                            "account:register-new-account-phone-label"
                                        )}
                                    />
                                    <Field
                                        name="company"
                                        id="company"
                                        component={RenderTextfield}
                                        type="text"
                                        className="govuk-input govuk-input--width-20"
                                        validate={[required]}
                                        label={t(
                                            "account:register-new-account-company-label"
                                        )}
                                    />
                                </fieldset>
                                <fieldset className="govuk-fieldset">
                                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
                                        <h2 className="govuk-fieldset__heading">
                                            {t(
                                                "account:register-new-account-sub-heading-2"
                                            )}
                                        </h2>
                                    </legend>

                                    <Field
                                        name="address1_line1"
                                        id="address1_line1"
                                        component={RenderTextfield}
                                        type="text"
                                        className="govuk-input govuk-input--width-20"
                                        label={t(
                                            "account:register-new-account-address-line-1-label"
                                        )}
                                        validate={[required]}
                                        errorMsg={t(
                                            "account:register-new-account-address-line-1-label-errormsg"
                                        )}
                                    />
                                    <Field
                                        name="address1_line2"
                                        id="address1_line2"
                                        component={RenderTextfield}
                                        type="text"
                                        className="govuk-input govuk-input--width-20"
                                        label={t(
                                            "account:register-new-account-address-line-2-label"
                                        )}
                                    />
                                    <Field
                                        name="address1_city"
                                        id="address1_city"
                                        component={RenderTextfield}
                                        type="text"
                                        className="govuk-input govuk-input--width-10"
                                        label={t(
                                            "account:register-new-account-town-label"
                                        )}
                                        validate={[required]}
                                        errorMsg={t(
                                            "account:register-new-account-town-label-errormsg"
                                        )}
                                    />
                                    <Field
                                        name="address1_county"
                                        id="address1_county"
                                        component={RenderTextfield}
                                        type="text"
                                        className="govuk-input govuk-input--width-10"
                                        label={t(
                                            "account:register-new-account-county-label"
                                        )}
                                        validate={[required]}
                                        errorMsg={t(
                                            "account:register-new-account-county-label-errormsg"
                                        )}
                                    />
                                    <Field
                                        name="address1_postalcode"
                                        id="address1_postalcode"
                                        component={RenderTextfield}
                                        type="text"
                                        className="govuk-input govuk-input--width-5"
                                        label={t(
                                            "account:register-new-account-postcode-label"
                                        )}
                                        validate={[required, postcode]}
                                    />
                                </fieldset>

                                <div className="govuk-button-group">
                                    <button
                                        type="submit"
                                        className="govuk-button"
                                        data-module="govuk-button"
                                    >
                                        {t("common:continue-button")}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                ) : (
                    <RegisterFormCheck
                        props={props}
                        setRegisterFormComplete={setRegisterFormComplete}
                        setAccountCreatedComplete={setAccountCreatedComplete}
                    />
                )
            ) : (
                <RegisterComplete
                    props={props}
                    setRegisterFormComplete={setRegisterFormComplete}
                    setAccountCreatedComplete={setAccountCreatedComplete}
                />
            )}
        </>
    );
};

const mapStateToProps = (state, props) => {
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        //form: state.form,
        initialValues: {
            emailaddress1: props.loggedInUserEmail
        }
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentSection: (currentSection) => {
            dispatch(setCurrentSection(currentSection));
        }
    };
};

const selector = formValueSelector("accountRegisterForm"); // <-- same as form name

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(
    reduxForm({
        form: "accountRegisterForm",
        enableReinitialize: true,
        destroyOnUnmount: false
    })(RegisterForm)
);