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

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

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

    const { onSubmit, handleSubmit, appellantAgentValue } = props;

    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 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}
                    />
                </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 onHandleSubmit = (values) => {
        event.preventDefault();

        console.log(values);
        router.replace("/newappeal");
    };
    return (
        <form onSubmit={handleSubmit(onHandleSubmit)}>
            <Field
                name={"onbehalfof"}
                id={"onbehalfof"}
                component={RenderTextfield}
                type="text"
                className="govuk-input govuk-input--width-20"
                validate={[required]}
                label={t("newappeal:about-you-on-behalf-label")}
            />
            <div className="govuk-form-group">
                <details className="govuk-details" data-module="govuk-details">
                    <summary className="govuk-details__summary">
                        <span className="govuk-details__summary-text">
                            Who can appeal?
                        </span>
                    </summary>
                    <div className="govuk-details__text">
                        Only those named as an applicant on the original
                        application form can submit an appeal. if you are
                        submitting an appeal on behalf of a company state the
                        name of the company you are representing,
                    </div>
                </details>
            </div>
            <Field
                name={"appellantAgent"}
                datafieldname={"appellantAgent"}
                label={t("newappeal:about-you-who-are-you-label")}
                options={appellantAgent}
                id={"appellantAgent"}
                className="govuk-radios__input"
                validate={[required]}
                errorMsg="Select an option"
                component={RenderYesNo}
            />
            {(appellantAgentValue == "Appellant" ||
                appellantAgentValue == "Apelydd") && (
                <>
                    <h2 className="govuk-heading-s">
                        {t("newappeal:about-you-appellant-contact-details")}
                    </h2>
                    <Field
                        name={"appellantfirstname"}
                        id={"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={"appellantlastname"}
                        id={"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={"appellantemailaddress"}
                        id={"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={"appellantphonenumber"}
                        id={"appellantphonenumber"}
                        component={RenderTextfield}
                        type="numberz"
                        className="govuk-input govuk-input--width-20"
                        validate={[required, phoneNumber]}
                        label={t(
                            "newappeal:about-you-appellant-contact-details-phone-label"
                        )}
                    />
                    <Field
                        name={"contactPrefs"}
                        datafieldname={"contactPrefs"}
                        label={t(
                            "newappeal:about-you-agent-contact-preferences-label"
                        )}
                        options={contactPref}
                        id={"contactPrefs"}
                        className="govuk-radios__input"
                        //validate={[required]}
                        errorMsg="Select an option"
                        component={RenderYesNo}
                    />
                </>
            )}
            {(appellantAgentValue == "Agent" ||
                appellantAgentValue == "Asiant") && (
                <>
                    <h2 className="govuk-heading-s">
                        {t("newappeal:about-you-appellant-contact-details")}
                    </h2>
                    <Field
                        name={"appellantfirstname"}
                        id={"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={"appellantlastname"}
                        id={"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={"appellantemailaddress"}
                        id={"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={"appellantphonenumber"}
                        id={"appellantphonenumber"}
                        component={RenderTextfield}
                        type="text"
                        className="govuk-input govuk-input--width-20"
                        validate={[required]}
                        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={"agentcompanyname"}
                        id={"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={"agentfirstname"}
                        id={"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={"agentlastname"}
                        id={"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={"agentemailaddress"}
                        id={"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={"agentphonenumber"}
                        id={"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"
                        )}
                    />
                    <Field
                        name={"contactPrefs"}
                        datafieldname={"contactPrefs"}
                        label={t(
                            "newappeal:about-you-agent-contact-preferences-label"
                        )}
                        options={contactPref}
                        id={"contactPrefs"}
                        className="govuk-radios__input"
                        //validate={[required]}
                        errorMsg="Select an option"
                        component={RenderYesNo}
                    />
                </>
            )}

            <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,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {};
};

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, "appellantAgent");

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

export default AboutYou;

// export default connect(
//     mapStateToProps,
//     mapDispatchToProps
// )(
//     reduxForm({
//         form: "caseForm",
//         destroyOnUnmount: false,
//     })(AboutYou)
// );