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

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.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
                    id={id}
                    {...input}
                    rows={rows}
                    className={className}
                    maxLength="2000"
                ></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">
                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                        {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">
                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                        {label}
                        {custom.hint != undefined && (
                            <div className="govuk-hint govuk-!-margin-top-4 govuk-!-font-size-16">
                                {custom.hint.indexOf("{{p}}") < 0 ? (
                                    <p>{custom.hint}</p>
                                ) : (
                                    <>
                                        <p className="govuk-body-m">
                                            {custom.hint.split("{{p}}")[0]}
                                            <br />
                                            {custom.hint.split("{{p}}")[1]}
                                        </p>
                                    </>
                                )}
                            </div>
                        )}
                    </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,
        hint
    } = 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={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={hint}
                    //validate={eval(validation)}
                    requiredDocumentLabel={props.requiredDocumentLabel}
                    requiredDocumentValue={props.requiredDocumentValue}
                    setDocumentsList={props.setDocumentsList}
                    documentList={props.documentList}
                />
            )}
        </>
    );
}

const RenderCheckBox = ({
    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">
                    {touched && error && (
                        <span
                            id={id + "-error"}
                            className="govuk-error-message"
                        >
                            <span className="govuk-visually-hidden">
                                Error:
                            </span>{" "}
                            {errorMsg}
                        </span>
                    )}
                    <div className={"govuk-checkboxes govuk-checkboxes--small"}>
                        <div className="govuk-checkboxes__item">
                            <Field
                                id={id}
                                name={id}
                                component="input"
                                type="checkbox"
                                className="govuk-checkboxes__input"
                                value={true}
                                validate={[required]}
                            />
                            <label
                                className="govuk-label govuk-checkboxes__label"
                                htmlFor={id}
                            >
                                {label}
                            </label>
                        </div>
                    </div>
                </fieldset>
            </div>
        </>
    );
};

let AboutYou = (props) => {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    const isWelsh = router.locale == "cy";

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

    const [isAgent, setIsAgent] = useState(false);
    const isAgentSelected = appellantAgentValue == "846040001";
    const isAppellantSelected = appellantAgentValue == "846040000";

    console.log(
        "================",
        props.initialValues.pinswg_typeofinvolvement
    );

    //props.initialValues.pinswg_typeofinvolvement === 846040000 &&
    //    setIsAgent(true);

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

    const required = (value) =>
        value ? undefined : t("newappeal:is-required-label");

    const emojicheck = (value) => {
        let errors;

        // Check for emojis using a regular expression
        const emojiRegex =
            /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{2300}-\u{23FF}\u{2B50}\u{1F004}-\u{1F0CF}\u{1F0A0}-\u{1F0A5}\u{1F170}-\u{1F251}]/gu;

        if (emojiRegex.test(value)) {
            errors = t("newappeal:emojis-not-allowed-label");
        }

        return errors;
    };
    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("newappeal:emojis-not-allowed-label")
            : 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("newappeal:invalid-phonenumber-label")
            : undefined;

    const onHandleSubmit = (values) => {
        event.preventDefault();
        window.scrollTo({ top: 0, behavior: "smooth" });
        setFormStep(1);
    };

    const handlePartialUpdate = () => {
        if (isAgentSelected && isAgent == false) {
            updateField("caseForm", "pinswg_appellantfirstname", "");
            updateField("caseForm", "pinswg_appellantlastname", "");
            updateField("caseForm", "company", "");
            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)}>
            <div>
                <p className="govuk-body-m">{t("newappeal:about-you-hint")}</p>
            </div>
            <Field
                name={"pinswg_onbehalfof"}
                id={"pinswg_onbehalfof"}
                component={RenderTextfield}
                type="text"
                className="govuk-input govuk-input--width-20"
                validate={[required, emojicheck]}
                label={t("newappeal:about-you-on-behalf-label")}
                maxFieldLength="200"
            />
            <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")}
                hint={t("newappeal:about-you-who-are-you-hint-label")}
            />
            {isAppellantSelected && (
                <>
                    <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, emojicheck]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-firstname-label"
                        )}
                        maxFieldLength="200"
                    />
                    <Field
                        name={"pinswg_appellantlastname"}
                        id={"pinswg_appellantlastname"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={[required, emojicheck]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-lastname-label"
                        )}
                        maxFieldLength="200"
                    />
                    <Field
                        name={"pinswg_appellantcompany"}
                        id={"pinswg_appellantcompany"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        label={t(
                            "newappeal:about-you-agent-contact-details-companyname-label"
                        )}
                        maxFieldLength="200"
                    />
                    <Field
                        name={"pinswg_appellantaddress"}
                        id={"pinswg_appellantaddress"}
                        component={RenderMultiline}
                        type="textarea"
                        className="govuk-textarea govuk-input--width-20"
                        validate={[required, emojicheck]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-address-label"
                        )}
                        rows={4}
                        maxFieldLength="2000"
                    />
                    <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"
                        )}
                        maxFieldLength="200"
                    />
                    <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"
                        )}
                    />

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

                    <div>
                        <p className="govuk-body-m">
                            {t(
                                "newappeal:about-you-communication-disclaimer-label"
                            )}
                        </p>
                    </div>
                    <Field
                        name={"pinswg_nondeterminationconfirmation"}
                        datafieldname={"pinswg_nondeterminationconfirmation"}
                        options={"[yes]"}
                        label={t("newappeal:appeal-confirmation-label")}
                        id={"pinswg_nondeterminationconfirmation"}
                        validate={[required]}
                        errorMsg={t("newappeal:select-to-confirm-label")}
                        component={RenderCheckBox}
                    />
                </>
            )}
            {isAgentSelected && (
                <>
                    <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"
                        )}
                        maxFieldLength="200"
                    />
                    <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"
                        )}
                        maxFieldLength="200"
                    />
                    <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}
                        maxFieldLength="2000"
                    />
                    <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"
                        )}
                        maxFieldLength="200"
                    />
                    <Field
                        name={"pinswg_appellantphonenumber"}
                        id={"pinswg_appellantphonenumber"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={[phoneNumber]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-phone-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")}
                    />
                    <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"
                        )}
                        maxFieldLength="200"
                    />
                    <Field
                        name={"pinswg_agentreference"}
                        id={"pinswg_agentreference"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        // validate={[required]}
                        label={t("newappeal:about-you-agent-reference-label")}
                        maxFieldLength="200"
                    />
                    <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"
                        )}
                        maxFieldLength="200"
                    />
                    <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"
                        )}
                        maxFieldLength="200"
                    />{" "}
                    <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}
                        maxFieldLength="2000"
                    />
                    <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"
                        )}
                        maxFieldLength="200"
                    />
                    <Field
                        name={"pinswg_agentphonenumber"}
                        id={"pinswg_agentphonenumber"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={[required, phoneNumber]}
                        label={t(
                            "newappeal:about-you-agent-contact-details-phone-label"
                        )}
                    />
                    <Radiofield
                        name={"pinswg_agentlanguagepreference"}
                        datafieldname={"pinswg_agentlanguagepreference"}
                        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_agentlanguagepreference"}
                        className="govuk-radios__input"
                        validate={[required]}
                        errorMsg={t("newappeal:select-an-option-label")}
                    />
                    <div>
                        <p className="govuk-body-m">
                            {t(
                                "newappeal:about-you-communication-disclaimer-label"
                            )}
                        </p>
                    </div>
                    <Field
                        name={"pinswg_nondeterminationconfirmation"}
                        datafieldname={"pinswg_nondeterminationconfirmation"}
                        options={"[yes]"}
                        label={t("newappeal:appeal-confirmation-label")}
                        id={"pinswg_nondeterminationconfirmation"}
                        validate={[required]}
                        errorMsg={t("newappeal:select-to-confirm-label")}
                        component={RenderCheckBox}
                    />
                </>
            )}

            <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_appellantcompany:
                state.accountDetails.accountDetails.company,
            pinswg_appellantemailaddress:
                state.accountDetails.accountDetails.emailaddress1,
            pinswg_appellantaddress:
                state.accountDetails.accountDetails.address1_composite,
            pinswg_appellantphonenumber:
                state.accountDetails.accountDetails.telephone1,
            pinswg_agentcompanyname:
                state.accountDetails.accountDetails.company,
            pinswg_agentfirstname:
                state.accountDetails.accountDetails.firstname,
            pinswg_agentlastname: state.accountDetails.accountDetails.lastname,
            pinswg_agentemailaddress:
                state.accountDetails.accountDetails.emailaddress1,
            pinswg_agentaddress:
                state.accountDetails.accountDetails.address1_composite,
            pinswg_agentphonenumber:
                state.accountDetails.accountDetails.telephone1,
            pinswg_typeofinvolvement:
                state.accountDetails.accountDetails.pinswg_typeofinvolvement
        }
    };
};

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)
);