import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import React from "react";
import { connect } from "react-redux";
import { setAccCr } from "../../store/accountDetails/action";

const RegisterFormCheck = (props) => {
    const {
        footerLinks,
        pages,
        handleSubmit,
        value,
        setRegisterFormComplete,
        setAccountCreatedComplete,
        setAccCr,
    } = props;
    let { t, lang } = useTranslation();

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

    return (
        <>
            <p>{t("account:register-new-account-check-details-paragraph")}</p>
            <h2 className="govuk-heading-m">
                {" "}
                {t("account:register-new-account-sub-heading-1")}
            </h2>
            <dl className="govuk-summary-list  govuk-!-margin-bottom-9">
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">
                        {t("account:register-new-account-first-name-label")}
                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.accountRegisterForm.values
                                .firstname
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setRegisterFormComplete(false);
                            }}
                        >
                            {t("common:change-link-label")}
                            <span className="govuk-visually-hidden">
                                {t(
                                    "account:register-new-account-first-name-label"
                                )}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">
                        {t("account:register-new-account-last-name-label")}
                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.accountRegisterForm.values
                                .lastname
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setRegisterFormComplete(false);
                            }}
                        >
                            {t("common:change-link-label")}

                            <span className="govuk-visually-hidden">
                                {t(
                                    "account:register-new-account-last-name-label"
                                )}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">
                        {t("account:register-new-account-email-address-label")}
                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.accountRegisterForm.values
                                .emailaddress1
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setRegisterFormComplete(false);
                            }}
                        >
                            {t("common:change-link-label")}

                            <span className="govuk-visually-hidden">
                                {" "}
                                {t(
                                    "account:register-new-account-email-address-label"
                                )}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">
                        {t("account:register-new-account-phone-label")}
                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.accountRegisterForm.values
                                .telephone1
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setRegisterFormComplete(false);
                            }}
                        >
                            {t("common:change-link-label")}

                            <span className="govuk-visually-hidden">
                                {t("account:register-new-account-phone-label")}
                            </span>
                        </a>
                    </dd>
                </div>
            </dl>
            <dl className="govuk-summary-list  govuk-!-margin-bottom-9">
                <h2 className="govuk-heading-m">
                    {t("account:register-new-account-sub-heading-2")}
                </h2>

                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">
                        {t("account:register-new-account-address-line-1-label")}
                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.accountRegisterForm.values
                                .address1_line1
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setRegisterFormComplete(false);
                            }}
                        >
                            {t("common:change-link-label")}

                            <span className="govuk-visually-hidden">
                                {" "}
                                {t(
                                    "account:register-new-account-address-line-1-label"
                                )}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">
                        {t("account:register-new-account-address-line-2-label")}
                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.accountRegisterForm.values
                                .address1_line2
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setRegisterFormComplete(false);
                            }}
                        >
                            {t("common:change-link-label")}

                            <span className="govuk-visually-hidden">
                                {" "}
                                {t(
                                    "account:register-new-account-address-line-2-label"
                                )}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">
                        {t("account:register-new-account-town-label")}
                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.accountRegisterForm.values
                                .address1_city
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setRegisterFormComplete(false);
                            }}
                        >
                            {t("common:change-link-label")}

                            <span className="govuk-visually-hidden">
                                {" "}
                                {t("account:register-new-account-town-label")}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">
                        {" "}
                        {t("account:register-new-account-county-label")}
                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.accountRegisterForm.values
                                .address1_county
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setRegisterFormComplete(false);
                            }}
                        >
                            {t("common:change-link-label")}

                            <span className="govuk-visually-hidden">
                                {" "}
                                {t("account:register-new-account-county-label")}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">
                        {" "}
                        {t("account:register-new-account-postcode-label")}
                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.accountRegisterForm.values
                                .address1_postalcode
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setRegisterFormComplete(false);
                            }}
                        >
                            {t("common:change-link-label")}

                            <span className="govuk-visually-hidden">
                                {" "}
                                {t(
                                    "account:register-new-account-postcode-label"
                                )}
                            </span>
                        </a>
                    </dd>
                </div>
            </dl>
            <div className="govuk-button-group">
                <button
                    type="submit"
                    className="govuk-button"
                    data-module="govuk-button"
                    onClick={() => {
                        setAccCr(false);
                        setAccountCreatedComplete(true);
                    }}
                >
                    {t("common:continue-button")}
                </button>
            </div>
        </>
    );
};

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));
        },
        setAccCr: (accState) => {
            dispatch(setAccCr(accState));
        },
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(RegisterFormCheck);