import _ from "lodash";
import Link from "next/link";
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="#firstname"
                            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="#lastname"
                            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
                                .emailaddress1
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#emailaddress1"
                            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
                                .telephone1
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#telephone1"
                            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
                                .company
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#company"
                            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
                                .address1_line1
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#address1_line1"
                            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
                                .address1_line2
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#address1_line2"
                            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
                                .address1_city
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#address1_city"
                            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
                                .address1_county
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#address1_county"
                            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
                                .address1_postalcode
                        }
                    </dd>
                    <dd className="govuk-summary-list__actions">
                        <a
                            className="govuk-link"
                            href="#address1_postalcode"
                            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>
                <Link
                    href={"/myportal?q=" + props.accountDetails.loggedinUserId}
                >
                    <a className="govuk-link">Cancel</a>
                </Link>
            </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);