import _ from "lodash";
import React, { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import {
    Field,
    reduxForm,
    formValueSelector,
    getFormSubmitErrors,
} from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";

const BuildCheckPersonalDetails = (props) => {
    const {
        footerLinks,
        pages,
        handleSubmit,
        value,
        setPersonalDetailsComplete,
        setAccountUpdatedComplete,
    } = props;
    let { t, lang } = useTranslation();

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

    return (
        <>
            <h2 className="govuk-heading-m">About you</h2>
            <dl className="govuk-summary-list  govuk-!-margin-bottom-9">
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">First name</dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
                                .firstname
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
                            Change
                            <span className="govuk-visually-hidden">
                                first name
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">Last name</dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
                                .lastname
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
                            Change
                            <span className="govuk-visually-hidden">
                                {" "}
                                last name
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">Email address</dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
                                .email
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
                            Change
                            <span className="govuk-visually-hidden">
                                {" "}
                                email address
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">Telephone</dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
                                .telephone
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
                            Change
                            <span className="govuk-visually-hidden">
                                telephone
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">Company/Group</dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
                                .companygroup
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
                            Change
                            <span className="govuk-visually-hidden">
                                {" "}
                                company/group
                            </span>
                        </a>
                    </dd>
                </div>
            </dl>
            <dl className="govuk-summary-list  govuk-!-margin-bottom-9">
                <h2 className="govuk-heading-m">Your address</h2>

                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">Address Line 1</dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
                                .addressline1
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
                            Change
                            <span className="govuk-visually-hidden">
                                {" "}
                                address line 1
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">Address line 2</dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
                                .addressline2
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
                            Change
                            <span className="govuk-visually-hidden">
                                {" "}
                                address line 2
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">Town/City</dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
                                .towncity
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
                            Change
                            <span className="govuk-visually-hidden">
                                {" "}
                                town/city
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">County</dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
                                .county
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
                            Change
                            <span className="govuk-visually-hidden">
                                {" "}
                                county
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
                    <dt className="govuk-summary-list__key">Postcode</dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
                                .postcode
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#"
                            onClick={() => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
                            Change
                            <span className="govuk-visually-hidden">
                                {" "}
                                postcode
                            </span>
                        </a>
                    </dd>
                </div>
            </dl>
            <div className="govuk-button-group">
                <button
                    type="submit"
                    className="govuk-button"
                    data-module="govuk-button"
                    onClick={() => {
                        setAccountUpdatedComplete(true);
                    }}
                >
                    Continue
                </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));
        },
    };
};

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