import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import { useEffect, useState } from "react";
import { Field, formValueSelector, reduxForm, change } from "redux-form";
import { tr } from "date-fns/locale";

const RenderTextfield = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    type,
    errorMsg,
    disabled,
    meta: { touched, error },
    ...custom
}) => {
    //console.log(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={
                        custom.hasOwnProperty("maxFieldLength") &&
                        custom.maxFieldLength
                    }
                />
            </div>
        </>
    );
};

const RenderMultiline = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    errorMsg,
    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>
                )}
                <textarea
                    {...input}
                    rows={rows}
                    className={className}
                ></textarea>
            </div>
        </>
    );
};

const RenderYesNo = ({
    datafieldname,
    name,
    label,
    id,
    errorMsg,
    options,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    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--inline govuk-radios--small">
                        {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 RenderRadio = ({
    datafieldname,
    name,
    label,
    id,
    errorMsg,
    options,
    input: { onChange, value },
    meta: { touched, error },
    ...custom
}) => {
    let { t } = useTranslation();
    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={datafieldname + "-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={
                            custom.inline == false
                                ? "govuk-radios govuk-radios--small"
                                : "govuk-radios govuk-radios--inline govuk-radios--small"
                        }
                    >
                        {" "}
                        {custom.hint != false ||
                            (custom.hint != undefined && (
                                <div className="govuk-hint">
                                    {t(custom.hint)}
                                </div>
                            ))}
                        {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].split("|")[0]}
                                    validate={[required]}
                                    // checked={
                                    //     value ==
                                    //     parseInt(options[key].split("|")[0])
                                    // }
                                    onChange={(e) => {
                                        let docListObj = custom.documentList;
                                        if (
                                            custom.requiredDocumentValue ==
                                            "Yes"
                                        ) {
                                            e.target.value != "846040000"
                                                ? (docListObj = Object.assign(
                                                      docListObj,
                                                      {
                                                          ["documentCheckList_" +
                                                          id]:
                                                              custom.requiredDocumentLabel,
                                                      }
                                                  ))
                                                : delete docListObj[
                                                      "documentCheckList_" + id
                                                  ];
                                            custom.setDocumentsList(docListObj);
                                        }
                                    }}
                                />
                                <label
                                    className="govuk-label govuk-radios__label"
                                    htmlFor={id + "_" + index}
                                >
                                    {t(options[key].split("|")[1])}
                                </label>
                            </div>
                        ))}
                    </div>
                </fieldset>
            </div>
        </>
    );
};

function Radiofield(props) {
    const {
        name,
        label,
        datafieldname,
        parentField,
        form,
        formProps,
        parentFieldShowOnValue,
        validation,
    } = props;

    const router = useRouter();
    const required = (value) => (value ? undefined : "Required");
    // console.log(props.options);

    const fieldOptions = props.options
        .slice(1, props.options.length - 1)
        .split(",");

    //parentFieldShowOnValue
    var showIfHasParentShowValue = parentField != false;
    //debugger;
    // parentField != false &&
    // !_.isEmpty(formProps[form]) &&
    // _.has(formProps[form].values, parentField) &&
    // parentFieldShowOnValue.indexOf(
    //     formProps[form].values[parentField].toString()
    // ) > -1;

    (showIfHasParentShowValue == parentField) != false &&
        showIfHasParentShowValue;

    // console.log(
    //     datafieldname,
    //     showIfHasParentShowValue,
    //     formProps[form].values[parentField]
    // );
    let { t } = useTranslation();

    return (
        <>
            {parentField != false ? (
                showIfHasParentShowValue && (
                    <Field
                        name={name}
                        datafieldname={datafieldname}
                        label={label}
                        options={fieldOptions}
                        id={name}
                        validate={[required]}
                        errorMsg={t("newappeal:select-an-option-label")}
                        component={RenderRadio}
                        inline={props.inline}
                        hint={props.hint}
                        //validate={eval(validation)}
                        requiredDocumentLabel={props.requiredDocumentLabel}
                        requiredDocumentValue={props.requiredDocumentValue}
                        setDocumentsList={props.setDocumentsList}
                        documentList={props.documentList}
                    />
                )
            ) : (
                <Field
                    name={name}
                    datafieldname={datafieldname}
                    label={label}
                    options={fieldOptions}
                    id={name}
                    validate={[required]}
                    errorMsg={t("newappeal:select-an-option-label")}
                    component={RenderRadio}
                    inline={props.inline}
                    hint={props.hint}
                    //validate={eval(validation)}
                    requiredDocumentLabel={props.requiredDocumentLabel}
                    requiredDocumentValue={props.requiredDocumentValue}
                    setDocumentsList={props.setDocumentsList}
                    documentList={props.documentList}
                />
            )}
        </>
    );
}
let AboutYou = (props) => {
    let { t } = useTranslation();

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

    const {
        onSubmit,
        handleSubmit,
        appellantAgentValue,
        setFormStep,
        updateField,
    } = props;

    const [isAgent, setIsAgent] = useState(false);

    const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
    const appellantAgent =
        router.locale == "cy" ? ["Apelydd", "Asiant"] : ["Appellant", "Agent"];
    const contactPref =
        router.locale == "cy" ? ["Ebost", "Post"] : ["Email", "Post"];

    const required = (value) => (value ? undefined : "Is required");
    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) ? "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 onHandleSubmit = (values) => {
        event.preventDefault();
        console.log(JSON.stringify(values));
        setFormStep(1);
    };

    const handlePartialUpdate = () => {
        if (appellantAgentValue == "846040001" && isAgent == false) {
            updateField("caseForm", "pinswg_appellantfirstname", "");
            updateField("caseForm", "pinswg_appellantlastname", "");
            updateField("caseForm", "pinswg_appellantemailaddress", "");
            updateField("caseForm", "pinswg_appellantaddress", "");
            updateField("caseForm", "pinswg_appellantphonenumber", "");
            setIsAgent(true);
        } //else {
        // updateField(
        //     "caseForm",
        //     "pinswg_appellantfirstname",
        //     props.initialValues.pinswg_appellantfirstname
        // );
        // updateField(
        //     "caseForm",
        //     "pinswg_appellantlastname",
        //     props.initialValues.pinswg_appellantlastname
        // );
        // updateField(
        //     "caseForm",
        //     "pinswg_appellantemailaddress",
        //     props.initialValues.pinswg_appellantemailaddress
        // );
        // updateField(
        //     "caseForm",
        //     "pinswg_appellantaddress",
        //     props.initialValues.pinswg_appellantaddress
        // );
        // updateField(
        //     "caseForm",
        //     "pinswg_appellantphonenumber",
        //     props.initialValues.pinswg_appellantphonenumber
        // );
    };

    useEffect(() => {
        handlePartialUpdate();
    });

    return (
        <form onSubmit={handleSubmit(onHandleSubmit)}>
            <Field
                name={"pinswg_onbehalfof"}
                id={"pinswg_onbehalfof"}
                component={RenderTextfield}
                type="text"
                className="govuk-input govuk-input--width-20"
                validate={[required]}
                label={t("newappeal:about-you-on-behalf-label")}
                maxFieldLength="25"
            />
            <div className="govuk-form-group">
                <details className="govuk-details" data-module="govuk-details">
                    <summary className="govuk-details__summary">
                        <span className="govuk-details__summary-text">
                            {t("newappeal:about-you-who-can-appeal-label")}
                        </span>
                    </summary>
                    <div className="govuk-details__text">
                        {t("newappeal:about-you-who-can-appeal-paragraph")}
                    </div>
                </details>
            </div>

            <Radiofield
                name={"pinswg_appellantagent"}
                datafieldname={"pinswg_appellantagent"}
                label={t("newappeal:about-you-who-are-you-label")}
                options="[846040000|newappeal:about-you-who-are-you-label-appellant,846040001|newappeal:about-you-who-are-you-label-agent]"
                id={"pinswg_appellantagent"}
                className="govuk-radios__input"
                validate={"[required]"}
                errorMsg={t("newappeal:select-an-option-label")}
            />

            {appellantAgentValue == "846040000" && (
                <>
                    <h2 className="govuk-heading-s">
                        {t("newappeal:about-you-appellant-contact-details")}
                    </h2>
                    <Field
                        name={"pinswg_appellantfirstname"}
                        id={"pinswg_appellantfirstname"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={[required]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-firstname-label"
                        )}
                    />
                    <Field
                        name={"pinswg_appellantlastname"}
                        id={"pinswg_appellantlastname"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={[required]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-lastname-label"
                        )}
                    />
                    <Field
                        name={"pinswg_appellantaddress"}
                        id={"pinswg_appellantaddress"}
                        component={RenderMultiline}
                        type="textarea"
                        className="govuk-textarea govuk-input--width-20"
                        validate={[required]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-address-label"
                        )}
                        rows={4}
                    />
                    <Field
                        name={"pinswg_appellantemailaddress"}
                        id={"pinswg_appellantemailaddress"}
                        component={RenderTextfield}
                        type="email"
                        className="govuk-input govuk-input--width-20"
                        validate={[required, email]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-email-label"
                        )}
                    />
                    <Field
                        name={"pinswg_appellantphonenumber"}
                        id={"pinswg_appellantphonenumber"}
                        component={RenderTextfield}
                        type="number"
                        className="govuk-input govuk-input--width-20"
                        validate={[required, phoneNumber]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-phone-label"
                        )}
                    />

                    <Radiofield
                        name={"pinswg_contactprefs"}
                        datafieldname={"pinswg_contactprefs"}
                        label={t(
                            "newappeal:about-you-agent-contact-preferences-label"
                        )}
                        options="[846040000|newappeal:about-you-agent-contact-preferences-value-email,846040001|newappeal:about-you-agent-contact-preferences-value-post]"
                        id={"pinswg_contactprefs"}
                        className="govuk-radios__input"
                        validate={"[required]"}
                        errorMsg={t("newappeal:select-an-option-label")}
                    />
                    <Radiofield
                        name={"pinswg_languagepreference"}
                        datafieldname={"pinswg_languagepreference"}
                        label={t(
                            "newappeal:about-you-appellant-language-preferences-label"
                        )}
                        options="[846040000|newappeal:about-you-agent-language-preferences-value-english,846040001|newappeal:about-you-agent-language-preferences-value-welsh]"
                        id={"pinswg_languagepreference"}
                        className="govuk-radios__input"
                        validate={"[required]"}
                        errorMsg={t("newappeal:select-an-option-label")}
                    />
                </>
            )}
            {appellantAgentValue == "846040001" && (
                <>
                    <h2 className="govuk-heading-s">
                        {t("newappeal:about-you-appellant-contact-details")}
                    </h2>
                    <Field
                        name={"pinswg_appellantfirstname"}
                        id={"pinswg_appellantfirstname"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={[required]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-firstname-label"
                        )}
                    />
                    <Field
                        name={"pinswg_appellantlastname"}
                        id={"pinswg_appellantlastname"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={[required]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-lastname-label"
                        )}
                    />
                    <Field
                        name={"pinswg_appellantaddress"}
                        id={"pinswg_appellantaddress"}
                        component={RenderMultiline}
                        type="textarea"
                        className="govuk-textarea govuk-input--width-20"
                        validate={[required]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-address-label"
                        )}
                        rows={4}
                    />
                    <Field
                        name={"pinswg_appellantemailaddress"}
                        id={"pinswg_appellantemailaddress"}
                        component={RenderTextfield}
                        type="email"
                        className="govuk-input govuk-input--width-20"
                        validate={[required]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-email-label"
                        )}
                    />
                    <Field
                        name={"pinswg_appellantphonenumber"}
                        id={"pinswg_appellantphonenumber"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={[required, phoneNumber]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-phone-label"
                        )}
                    />
                    <h2 className="govuk-heading-s">
                        {t("newappeal:about-you-agent-contact-details")}
                    </h2>{" "}
                    <Field
                        name={"pinswg_agentcompanyname"}
                        id={"pinswg_agentcompanyname"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={[required]}
                        label={t(
                            "newappeal:about-you-agent-contact-details-companyname-label"
                        )}
                    />
                    <Field
                        name={"pinswg_agentfirstname"}
                        id={"pinswg_agentfirstname"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={[required]}
                        label={t(
                            "newappeal:about-you-agent-contact-details-firstname-label"
                        )}
                    />
                    <Field
                        name={"pinswg_agentlastname"}
                        id={"pinswg_agentlastname"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={[required]}
                        label={t(
                            "newappeal:about-you-agent-contact-details-lastname-label"
                        )}
                    />{" "}
                    <Field
                        name={"pinswg_agentaddress"}
                        id={"pinswg_agentaddress"}
                        component={RenderMultiline}
                        type="textarea"
                        className="govuk-textarea govuk-input--width-20"
                        validate={[required]}
                        label={t(
                            "newappeal:about-you-agent-contact-details-address-label"
                        )}
                        rows={4}
                    />
                    <Field
                        name={"pinswg_agentemailaddress"}
                        id={"pinswg_agentemailaddress"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={[required, email]}
                        label={t(
                            "newappeal:about-you-agent-contact-details-email-label"
                        )}
                    />
                    <Field
                        name={"pinswg_agentphonenumber"}
                        id={"pinswg_agentphonenumber"}
                        component={RenderTextfield}
                        type="number"
                        className="govuk-input govuk-input--width-20"
                        validate={[required, phoneNumber]}
                        label={t(
                            "newappeal:about-you-agent-contact-details-phone-label"
                        )}
                    />
                    <Radiofield
                        name={"pinswg_contactprefs"}
                        datafieldname={"pinswg_contactprefs"}
                        label={t(
                            "newappeal:about-you-agent-contact-preferences-label"
                        )}
                        options="[846040000|newappeal:about-you-agent-contact-preferences-value-email,846040001|newappeal:about-you-agent-contact-preferences-value-post]"
                        id={"pinswg_contactprefs"}
                        className="govuk-radios__input"
                        validate={[required]}
                        errorMsg={t("newappeal:select-an-option-label")}
                    />
                    <Radiofield
                        name={"pinswg_languagepreference"}
                        datafieldname={"pinswg_languagepreference"}
                        label={t(
                            "newappeal:about-you-agent-language-preferences-label"
                        )}
                        options="[846040001|newappeal:about-you-agent-language-preferences-value-welsh,846040000|newappeal:about-you-agent-language-preferences-value-english]"
                        id={"pinswg_languagepreference"}
                        className="govuk-radios__input"
                        validate={[required]}
                        errorMsg={t("newappeal:select-an-option-label")}
                    />
                </>
            )}

            <button
                type="submit"
                className="govuk-button"
                data-module="govuk-button"
            >
                {t("common:continue-button")}
            </button>
        </form>
    );
};

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

        initialValues: {
            pinswg_appellantfirstname:
                state.accountDetails.accountDetails.firstname,
            pinswg_appellantlastname:
                state.accountDetails.accountDetails.lastname,
            pinswg_appellantemailaddress:
                state.accountDetails.accountDetails.emailaddress1,
            pinswg_appellantaddress:
                state.accountDetails.accountDetails.address1_composite,
            pinswg_appellantphonenumber:
                state.accountDetails.accountDetails.telephone1,
        },
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        updateField: (form, field, newValue) =>
            dispatch(change(form, field, newValue)),
    };
};

// AboutYou = reduxForm({
//     form: "caseForm", // a unique identifier for this form
//     destroyOnUnmount: false,
// })(AboutYou);

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

AboutYou = connect((state) => {
    // can select values individually
    const appellantAgentValue = selector(state, "pinswg_appellantagent");

    return {
        appellantAgentValue,
    };
})(AboutYou);

//export default AboutYou;

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(
    reduxForm({
        form: "caseForm",
        enableReinitialize: true, // this is needed!!
        destroyOnUnmount: false,
    })(AboutYou)
);