import Link from "next/link";
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 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={name}
                    id={id}
                    type={type}
                />
            </div>
        </>
    );
};

const ChangePassword = (props) => {
    const {
        footerLinks,
        pages,
        handleSubmit,
        value,
        setPasswordUpdated,
        passwordUpdated,
    } = props;
    let { t, lang } = useTranslation();

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

    let errorsobj = {};

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

    const required = (value) => (value ? undefined : "Is required");

    const passwordsMustMatch = (value, allValues) =>
        value !== allValues.newpassword ? "Passwords do not match" : undefined;

    const minLength = (min) => (value) =>
        value && value.length < min
            ? `Must be at least ${min} characters`
            : undefined;

    const [hasErrors, setHasErrors] = useState("");

    return (
        <>
            {passwordUpdated != true ? (
                <form onSubmit={handleSubmit(onHandleSubmit)}>
                    <fieldset className="govuk-fieldset">
                        <Field
                            name="newpassword"
                            id="newpassword"
                            component={RenderTextfield}
                            type="password"
                            className="govuk-input govuk-input--width-20"
                            validate={[required, minLength(6)]}
                            label="New password"
                        />
                        <Field
                            name="confirmpassword"
                            id="confirmpassword"
                            component={RenderTextfield}
                            type="password"
                            className="govuk-input govuk-input--width-20"
                            validate={[required, passwordsMustMatch]}
                            label="Confirm new password"
                        />
                    </fieldset>

                    <div className="govuk-button-group">
                        <button
                            type="submit"
                            className="govuk-button"
                            data-module="govuk-button"
                        >
                            Continue
                        </button>
                    </div>
                </form>
            ) : (
                <>
                    <p className="govuk-body">
                        <Link href="/myportal">
                            <a className="govuk-link">Go to My Portal</a>
                        </Link>
                    </p>
                </>
            )}
        </>
    );
};

const mapStateToProps = (state) => {
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        //form: state.form,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentSection: (currentSection) => {
            dispatch(setCurrentSection(currentSection));
        },
    };
};

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

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(
    reduxForm({
        form: "changepasswordForm",
        destroyOnUnmount: false,
    })(ChangePassword)
);