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

import BuildCheckPersonalDetails from "./personaldetailsCheck";
import PersonalDetailsComplete from "./personaldetailsComplete";

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

const RenderRadioList = ({
    datafieldname,
    name,
    label,
    id,
    errorMsg,
    options,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    const required = (value) => (value ? undefined : "Required");

    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <fieldset
                    className="govuk-fieldset"
                    aria-describedby={name + "-hint"}
                >
                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                        <label
                            className="govuk-fieldset__heading govuk-body-m"
                            id={id + "_label"}
                        >
                            {label}
                        </label>
                    </legend>
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errorMsg}
                        </span>
                    )}
                    <div className="govuk-radios govuk-radios--small govuk-radios--inline">
                        {Object.keys(options).map((key, index) => (
                            <div
                                className="govuk-radios__item"
                                data-children-count={key}
                                key={key}
                            >
                                <Field
                                    id={id + "_" + index}
                                    name={id}
                                    component="input"
                                    type="radio"
                                    className="govuk-radios__input"
                                    value={options[key]}
                                />
                                <label
                                    className="govuk-label govuk-radios__label"
                                    htmlFor={id + "_" + index}
                                >
                                    {options[key]}
                                </label>
                            </div>
                        ))}
                    </div>
                </fieldset>
            </div>
        </>
    );
};

const RenderPickList = ({
    datafieldname,
    name,
    label,
    input,
    optionsArr,
    meta: { touched, error },
    errorMsg,
}) => {
    let { t, lang } = useTranslation();
    optionsArr = [
        t("account:account-preferred-language-english") + ":846040001",
        t("account:account-preferred-language-welsh") + ":846040000",
    ];
    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <label className="govuk-label" htmlFor={datafieldname}>
                    {label}
                </label>
                {touched && error && (
                    <span id={name + "-error"} className="govuk-error-message">
                        <span className="govuk-visually-hidden">Error:</span>{" "}
                        {errorMsg}
                    </span>
                )}

                <div>
                    <select
                        {...input}
                        className="govuk-select "
                        id={datafieldname}
                        name={datafieldname}
                    >
                        <option value="" disabled defaultValue>
                            {t("common:drop-down-select")}
                        </option>
                        {Object.keys(optionsArr).map((key, index) => {
                            return (
                                <option
                                    key={key}
                                    value={optionsArr[key].split(":")[1]}
                                >
                                    {optionsArr[key].split(":")[0]}
                                </option>
                            );
                        })}
                    </select>
                </div>
            </div>
        </>
    );
};

let PersonalDetails = (props) => {
    const {
        handleSubmit,
        value,
        setPersonalDetailsComplete,
        setAccountUpdatedComplete,
        load,
        pristine,
        reset,
        submitting,
    } = props;
    let { t, lang } = useTranslation();

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

    let errorsobj = {};

    const required = (value) =>
        value
            ? undefined
            : t("account:register-new-account-postcode-label-errormsg");
    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 email = (value) =>
        value && !emailRegex.test(value)
            ? t("account:invalid-phone-number-errormsg")
            : 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
        )
            ? t("account:invalid-phone-number-errormsg")
            : undefined;

    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) => {
        setPersonalDetailsComplete(true);
    };

    return (
        <>
            {props.accountUpdatedComplete == false ? (
                props.personalDetailsComplete == false ? (
                    <form onSubmit={handleSubmit(onHandleSubmit)}>
                        <fieldset className="govuk-fieldset">
                            <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
                                <h2 className="govuk-fieldset__heading">
                                    {t("account:account-about-you-label")}
                                </h2>
                            </legend>
                            <div className="govuk-form-group ">
                                <span className="govuk-label ">
                                    {t("account:account-role-label")}:{" "}
                                    {
                                        props.props.accountDetails
                                            .accountDetails[
                                            "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
                                        ]
                                    }
                                </span>
                            </div>
                            <Field
                                name="pinswg_preferredlanguage"
                                component={RenderPickList}
                                datafieldname={"pinswg_preferredlanguage"}
                                optionsArr={["English", "Welsh"]}
                                className="govuk-input govuk-input--width-20 govuk-radios--inline"
                                validate={[required]}
                                label={t(
                                    "account:account-preferred-language-label"
                                )}
                                errorMsg={t("account:is-required-label")}
                            />

                            <Field
                                name="firstname"
                                id="firstname"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-20"
                                validate={[required]}
                                label={t("account:account-first-name-label")}
                                errorMsg={t("account:is-required-label")}
                            />
                            <Field
                                name="lastname"
                                id="lastname"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-20"
                                validate={[required]}
                                label={t("account:account-last-name-label")}
                                errorMsg={t("account:is-required-label")}
                            />
                            <Field
                                name="emailaddress1"
                                id="emailaddress1"
                                component={RenderTextfield}
                                type="email"
                                className="govuk-input govuk-input--width-20"
                                validate={[required, email]}
                                label={t("account: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:account-telephone-label")}
                            />
                            <Field
                                name="company"
                                id="company"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-20"
                                label={t("account:account-company-group-label")}
                                errorMsg={t("account:is-required-label")}
                            />
                        </fieldset>
                        <fieldset className="govuk-fieldset">
                            <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
                                <h2 className="govuk-fieldset__heading">
                                    {t("account:account-your-address-label")}
                                </h2>
                            </legend>

                            <Field
                                name="address1_line1"
                                id="address1_line1"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-20"
                                label={t(
                                    "account:account-address-line-1-label"
                                )}
                                validate={[required]}
                                errorMsg={t("account:is-required-label")}
                            />
                            <Field
                                name="address1_line2"
                                id="address1_line2"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-20"
                                label={t(
                                    "account:account-address-line-2-label"
                                )}
                                errorMsg={t("account:is-required-label")}
                            />
                            <Field
                                name="address1_city"
                                id="address1_city"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-10"
                                label={t("account:account-town-city-label")}
                                validate={[required]}
                                errorMsg={t("account:is-required-label")}
                            />
                            <Field
                                name="address1_county"
                                id="address1_county"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-10"
                                label={t("account:account-county-label")}
                                validate={[required]}
                                errorMsg={t("account:is-required-label")}
                            />
                            <Field
                                name="address1_postalcode"
                                id="address1_postalcode"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-5"
                                label={t("account: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>
                            <Link
                                href={
                                    "/myportal?q=" +
                                    props.props.accountDetails.loggedinUserId
                                }
                                className="govuk-link"
                            >
                                {t("common:cancel-link")}
                            </Link>
                        </div>
                    </form>
                ) : (
                    <>
                        <BuildCheckPersonalDetails
                            props={props}
                            setPersonalDetailsComplete={
                                setPersonalDetailsComplete
                            }
                            setAccountUpdatedComplete={
                                setAccountUpdatedComplete
                            }
                        />
                    </>
                )
            ) : (
                <PersonalDetailsComplete props={props} />
            )}
        </>
    );
};

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

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

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

// export default connect(
//     mapStateToProps,
//     mapDispatchToProps
//     //, (state) => ({
//     //     initialValues: state.accountDetails.accountDetails.data,
//     //     // search: state.search,
//     // searchResultsObj: state.searchResultsObj,
//     // formData: state.formData,
//     // appealType: state.appealType,
//     // accountDetails: state.accountDetails,
//     // form: state.form,
//     // pull initial values from account reducer
//     //})
// )(
//     reduxForm({
//         form: "personalDetailsForm",
//         enableReinitialize: true, // this is needed!!
//         destroyOnUnmount: false,
//     })(PersonalDetails)
// );

// Decorate with reduxForm(). It will read the initialValues prop provided by connect()
PersonalDetails = reduxForm({
    form: "personalDetailsForm",
    enableReinitialize: true, // this is needed!!
    destroyOnUnmount: false,
})(PersonalDetails);

// You have to connect() to any reducers that you wish to connect to yourself
PersonalDetails = connect((state) => ({
    initialValues: state.accountDetails.accountDetails, // pull initial values from account reducer
}))(PersonalDetails);

export default PersonalDetails;