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

import BuildCheckPersonalDetails from "./personaldetailsCheck";
import PersonalDetailsComplete from "./personaldetailsComplete";

const RenderTextfield = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    type,
    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>
                )}
                <input
                    {...input}
                    className={className}
                    name={id}
                    id={id}
                    type={type}
                />
            </div>
        </>
    );
};

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

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

    let errorsobj = {};

    const required = (value) => (value ? undefined : "Is required");
    const email = (value) =>
        value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.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 [hasErrors, setHasErrors] = useState("");

    const onHandleSubmit = (values) => {
        setPersonalDetailsComplete(true);
    };

    return (
        <>
            {props.accountUpdatedComplete == false ? (
                props.personalDetailsComplete == false ? (
                    <form onSubmit={handleSubmit(onHandleSubmit)}>
                        <fieldset className="govuk-fieldset">
                            <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
                                <h2 className="govuk-fieldset__heading">
                                    About you
                                </h2>
                            </legend>
                            <Field
                                name="firstname"
                                id="firstname"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-20"
                                validate={[required]}
                                label="First name"
                                errorMsg="Is required"
                            />
                            <Field
                                name="lastname"
                                id="lastname"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-20"
                                validate={[required]}
                                label="Last name"
                                errorMsg="Is required"
                            />
                            <Field
                                name="email"
                                id="email"
                                component={RenderTextfield}
                                type="email"
                                className="govuk-input govuk-input--width-20"
                                validate={[required, email]}
                                label="Email address"
                            />
                            <Field
                                name="telephone"
                                id="telephone"
                                component={RenderTextfield}
                                type="number"
                                className="govuk-input govuk-input--width-20"
                                validate={[required, phoneNumber]}
                                label="Telephone"
                            />

                            <Field
                                name="companygroup"
                                id="companygroup"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-20"
                                label="Company/Group"
                                errorMsg="Is required"
                            />
                        </fieldset>
                        <fieldset className="govuk-fieldset">
                            <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
                                <h2 className="govuk-fieldset__heading">
                                    What is your address?
                                </h2>
                            </legend>

                            <Field
                                name="addressline1"
                                id="addressline1"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-20"
                                label="Address line 1"
                                validate={[required]}
                                errorMsg="Is required"
                            />
                            <Field
                                name="addressline2"
                                id="addressline2"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-20"
                                label="Address line 2"
                                errorMsg="Is required"
                            />
                            <Field
                                name="towncity"
                                id="towncity"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-10"
                                label="Town/City"
                                validate={[required]}
                                errorMsg="Is required"
                            />
                            <Field
                                name="county"
                                id="county"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-10"
                                label="County"
                                validate={[required]}
                                errorMsg="Is required"
                            />
                            <Field
                                name="postcode"
                                id="postcode"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-5"
                                label="Postcode"
                                validate={[required]}
                                errorMsg="Is required"
                            />
                        </fieldset>
                        <div className="govuk-button-group">
                            <button
                                type="submit"
                                className="govuk-button"
                                data-module="govuk-button"
                            >
                                Continue
                            </button>
                        </div>
                    </form>
                ) : (
                    <>
                        <BuildCheckPersonalDetails
                            props={props}
                            setPersonalDetailsComplete={
                                setPersonalDetailsComplete
                            }
                            setAccountUpdatedComplete={
                                setAccountUpdatedComplete
                            }
                        />
                    </>
                )
            ) : (
                <PersonalDetailsComplete />
            )}
        </>
    );
};

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

const selector = formValueSelector("personalDetailsForm"); // <-- same as form name

export default connect(
    mapStateToProps,
    mapDispatchToProps
    //, (state) => ({
    //     initialValues: state.accountDetails.accountDetails.data,
    //     // search: state.search,
    // searchResultsObj: state.searchResultsObj,
    // formData: state.formData,
    // appealType: state.appealType,
    // accountDetails: state.accountDetails,
    // form: state.form,
    // pull initial values from account reducer
    //})
)(
    reduxForm({
        form: "personalDetailsForm",
        enableReinitialize: true, // this is needed!!
        destroyOnUnmount: false,
    })(PersonalDetails)
);