import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { useState, useEffect } from "react";
import xpath from "xpath";
import BuildRow from "./buildrow";
import { reduxForm, formValueSelector, Field } from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import jsonpath from "jsonpath";
import {
    setAppealType,
    setAppealTypeTitle,
    setAppealTypeID,
    setAppealLPA,
    getAppealTypeObj,
} from "../../store/appealType/action";

import { createCase } from "../../actions";

let CreateCase = (props) => {
    // useEffect(() => {
    //     window.scrollTo(0, 0);
    // });

    let { t } = useTranslation();

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

    const { LPAData, onSubmit, handleSubmit } = props;

    const appealOptionsObj = props.appealType.appealTypeOptions.GlobalOptionSet
        .Options || [{}];

    let lpaOptionsObj = jsonpath.query(props.LPAData.LPAData, "$..name");

    const RenderLPAList = ({
        name,
        input,
        optionsObj,
        meta: { touched, error },
    }) => {
        return (
            <div>
                <select
                    {...input}
                    className="govuk-select"
                    id="lpatypes"
                    name={name}
                    //onChange={(e) => props.onChangeSelectLPA(e)}
                >
                    <option>Select...</option>
                    {Object.keys(optionsObj).map((key, index) => {
                        return (
                            <option key={key} value={optionsObj[key]}>
                                {optionsObj[key]}
                            </option>
                        );
                    })}
                </select>
                {touched && error && <span>{error}</span>}
            </div>
        );
    };

    const RenderAppealTypeList = ({
        name,
        input,
        optionsObj,
        meta: { touched, error },
    }) => {
        return (
            <div>
                <select
                    {...input}
                    className="govuk-select"
                    id="appealTypes"
                    name={name}
                    //onChange={(e) => props.onChangeSelectAppealType(e)}
                >
                    <option>Select...</option>
                    {Object.keys(optionsObj).map((key, index) => {
                        return (
                            <option
                                key={key}
                                value={optionsObj[
                                    key
                                ].Label.LocalizedLabels[0].Label.replace(
                                    /[\s\-\+\(\)\,]/g,
                                    ""
                                ).toLowerCase()}
                            >
                                {optionsObj[key].Label.LocalizedLabels[0].Label}
                            </option>
                        );
                    })}
                </select>
                {touched && error && <span>{error}</span>}
            </div>
        );
    };

    const onHandleSubmit = (values) => {
        event.preventDefault();

        console.log(createCase("asasa", "asasa"));

        const caseReference = createCase("123123", "213132");

        router.replace(
            "/newappeal/" + values.appealTypes + "?refno=" + caseReference,
            null,
            {
                shallow: true,
            }
        );
        console.log(values);
    };

    return (
        <form onSubmit={handleSubmit(onHandleSubmit)}>
            <div className="govuk-form-group">
                <label className="govuk-label" htmlFor="sort">
                    Select your local planning authority
                </label>
                <Field
                    name="lpaTypes"
                    component={RenderLPAList}
                    optionsObj={lpaOptionsObj}
                />
                {/* <select
                    className="govuk-select"
                    id="appealTypes"
                    name="appealTypes"
                    onChange={(e) => props.onChangeSelectLPA(e)}
                >
                    {" "}
                    <option>Select...</option>
                    {lpaOptions}
                </select> */}
            </div>

            <div className="govuk-form-group">
                <label className="govuk-label" htmlFor="sort">
                    Select an appeal type
                </label>
                <Field
                    name="appealTypes"
                    component={RenderAppealTypeList}
                    optionsObj={appealOptionsObj}
                />
                {/* <select
                    className="govuk-select"
                    id="appealTypes"
                    name="appealTypes"
                    onChange={(e) => props.onChangeSelectAppealType(e)}
                >
                    <option>Select...</option>
                    {appealOptions}
                </select> */}
            </div>
            <button
                type="submit"
                className="govuk-button"
                data-module="govuk-button"
            >
                Continue
            </button>
        </form>
    );
};

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

const mapDispatchToProps = (dispatch) => {
    return {
        onChangeSelectAppealType: (event) => {
            dispatch(
                setAppealTypeTitle(
                    event.target.options[event.target.selectedIndex].text
                )
            );
            dispatch(setAppealTypeID(event.target.value));
        },
        onChangeSelectLPA: (event) => {
            dispatch(setAppealLPA(event.target.value));
        },
    };
};

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

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