import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";
import _ from "lodash";
import { Field, FieldArray, reduxForm, formValueSelector } from "redux-form";
import { connect } from "react-redux";
import { useDropzone } from "react-dropzone";

const MakeRepresentation = (props) => {
    let { t } = useTranslation();
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();

    const files = acceptedFiles.map((file) => (
        <li key={file.path}>
            {file.path} - {file.size} bytes
        </li>
    ));

    const router = useRouter();
    const { locale } = router;
    const {
        caseReference,
        myCases,
        myRepresentations,
        watchedCases,
        awaitingSubmission,
        searchResultsObj,
        currentType,
    } = props;
    const formObj = props.props.form;
    let setCaseQueryObj = props[currentType];
    var casesObj = {};

    currentType == "searchResultsObj"
        ? (casesObj = jsonpath.query(
              setCaseQueryObj,
              '$..[?(@.title=="' + caseReference + '")]'
          ))
        : (casesObj = jsonpath.query(
              setCaseQueryObj,
              '$..[?(@.reference=="' + caseReference + '")]'
          ));

    casesObj = Object.assign({}, ...casesObj);

    const RenderRepresentationCapacity = ({
        datafieldname,
        name,
        label,
        id,
        errorMsg,
        options,
        input: { onChange, value },
        meta: { touched, error },
        ...custom
    }) => {
        return (
            <>
                <div
                    className={
                        touched && error
                            ? "govuk-form-group govuk-form-group--error"
                            : "govuk-form-group "
                    }
                >
                    <fieldset
                        className="govuk-fieldset"
                        aria-describedby={name + "-hint"}
                    >
                        <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                            <label
                                className="govuk-fieldset__heading govuk-body-m"
                                id={id + "_label"}
                            >
                                {label}
                            </label>
                        </legend>
                        {touched && error && (
                            <span
                                id={id + "-error"}
                                className="govuk-error-message"
                            >
                                <span className="govuk-visually-hidden">
                                    Error:
                                </span>{" "}
                                {errorMsg}
                            </span>
                        )}
                        <div className="govuk-radios govuk-radios--small">
                            {Object.keys(options).map((key, index) => (
                                <div
                                    className="govuk-radios__item"
                                    data-children-count={key}
                                    key={key}
                                >
                                    <Field
                                        id={id + "_" + index}
                                        name={id}
                                        component="input"
                                        type="radio"
                                        className="govuk-radios__input"
                                        value={options[key]}
                                    />
                                    <label
                                        className="govuk-label govuk-radios__label"
                                        htmlFor={id + "_" + index}
                                    >
                                        {options[key]}
                                    </label>
                                </div>
                            ))}
                        </div>
                    </fieldset>
                </div>
            </>
        );
    };

    const { name, label } = props;
    const capacityOptionsArr = [
        "Appellant",
        "Agent",
        "Interested Party / Person",
        "Land Owner",
    ];
    const required = (value) => (value ? undefined : "Required");

    const RenderPickList = ({
        datafieldname,
        name,
        label,
        input,
        meta: { touched, errorStr },
    }) => {
        const dropdownObj = ["Final Comments", "Other", "Proof of Evidence"];

        return (
            <div>
                <select
                    {...input}
                    className="govuk-select "
                    id={name}
                    name={name}
                >
                    <option>Select...</option>
                    {Object.keys(dropdownObj).map((key, index) => {
                        return (
                            <option key={key} value={dropdownObj[key]}>
                                {dropdownObj[key]}
                            </option>
                        );
                    })}
                </select>

                {touched && errorStr && <span>{errorStr}</span>}
            </div>
        );
    };

    const RenderTextfield = ({
        id,
        rows,
        datafieldname,
        name,
        label,
        input,
        errorMsg,
        type,
        className,
        meta: { touched, error },
        ...custom
    }) => {
        return (
            <>
                <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>{" "}
                        {errorMsg}
                    </span>
                )}
                <input
                    {...input}
                    className={className}
                    name={name}
                    id={id}
                    type={type}
                />
            </>
        );
    };

    return (
        <div>
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
                        Make a representation
                    </h1>

                    <dl className="govuk-summary-list govuk-!-margin-bottom-9">
                        <div className="govuk-summary-list__row">
                            <dt className="govuk-summary-list__key">
                                Appeal Reference
                            </dt>
                            <dd className="govuk-summary-list__value">
                                {currentType == "searchResultsObj"
                                    ? casesObj.title
                                    : casesObj.reference}
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dt className="govuk-summary-list__key">
                                {t("case:summary-applicant-label")}
                            </dt>
                            <dd className="govuk-summary-list__value">
                                {casesObj.appellantApplicant || ""}
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dt className="govuk-summary-list__key">
                                {t("case:summary-agent-label")}
                            </dt>
                            <dd className="govuk-summary-list__value">
                                Mr A Agent
                            </dd>
                        </div>
                        <div className="govuk-summary-list__row">
                            <dt className="govuk-summary-list__key">
                                {t("case:summary-site-address-label")}
                            </dt>
                            <dd className="govuk-summary-list__value">
                                {casesObj.address1 || ""}
                                <br />
                                {casesObj.town || ""}

                                <br />
                                {casesObj.postcode || ""}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>
            <div className="vo_hidden">
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <h2 className="govuk-heading-m ">Your details</h2>
                        <Field
                            name="representationCapacity"
                            datafieldname="representationCapacity"
                            label="In what capacity do you wish to make representations on this case?"
                            options={capacityOptionsArr}
                            id="representationCapacity"
                            className="govuk-radios__input"
                            //validate={[required]}
                            errorMsg="Select and option"
                            component={RenderRepresentationCapacity}
                        />
                    </div>
                </div>
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <div className="govuk-button-group">
                            <Link href="/representation">
                                <a className="govuk-button">Continue</a>
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <h2 className="govuk-heading-m ">Representation</h2>

                        <div className="govuk-form-group">
                            <label
                                className="govuk-label govuk-body-m"
                                htmlFor="representationType"
                            >
                                What kind of representation are you making?
                            </label>
                            <Field
                                name="representationType"
                                component={RenderPickList}
                                datafieldname="representationType"
                            />
                        </div>
                    </div>
                </div>
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <div className="govuk-form-group">
                            <p className="govuk-body">
                                You can enter your comments in the space
                                provided or attach a separate document.
                            </p>
                            <fieldset
                                className="govuk-fieldset"
                                aria-describedby="commentBox-hint"
                            >
                                <div
                                    id="commentBox-hint"
                                    className="govuk-hint"
                                >
                                    My comments are set out in:*
                                </div>
                                <div
                                    className="govuk-checkboxes"
                                    data-module="govuk-checkboxes"
                                >
                                    <div className="govuk-checkboxes__item">
                                        <Field
                                            className="govuk-checkboxes__input"
                                            id="commentBox"
                                            name="commentBox"
                                            value="email"
                                            data-aria-controls="commentBox"
                                            type="checkbox"
                                            component={RenderTextfield}
                                        />
                                        <label
                                            className="govuk-label govuk-checkboxes__label"
                                            htmlFor="commentBox"
                                        >
                                            the box below{" "}
                                        </label>
                                    </div>
                                    <div
                                        className={
                                            _.isEmpty(
                                                formObj["representationForm"]
                                            )
                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
                                                : _.isEmpty(
                                                      formObj[
                                                          "representationForm"
                                                      ].values
                                                  )
                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden q11 "
                                                : _.isEmpty(
                                                      formObj[
                                                          "representationForm"
                                                      ].values.commentBox
                                                  )
                                                ? formObj["representationForm"]
                                                      .values.commentBox ==
                                                  false
                                                    ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
                                                    : "govuk-checkboxes__conditional"
                                                : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden wwwaqqqq"
                                        }
                                        id="conditional-commentBox"
                                    >
                                        <div className="govuk-form-group">
                                            <textarea
                                                className="govuk-input govuk-!-width-two-thirds"
                                                rows="5"
                                            />
                                        </div>
                                    </div>
                                    <div className="govuk-checkboxes__item">
                                        <Field
                                            className="govuk-checkboxes__input"
                                            id="documentBox"
                                            name="documentBox"
                                            value="email"
                                            data-aria-controls="documentBox"
                                            type="checkbox"
                                            component={RenderTextfield}
                                        />
                                        <label
                                            className="govuk-label govuk-checkboxes__label"
                                            htmlFfor="documentBox"
                                        >
                                            separate documents
                                        </label>
                                    </div>
                                    <div
                                        className={
                                            _.isEmpty(
                                                formObj["representationForm"]
                                            )
                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
                                                : _.isEmpty(
                                                      formObj[
                                                          "representationForm"
                                                      ].values
                                                  )
                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
                                                : _.isEmpty(
                                                      formObj[
                                                          "representationForm"
                                                      ].values.documentBox
                                                  )
                                                ? formObj["representationForm"]
                                                      .values.documentBox ==
                                                  false
                                                    ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
                                                    : "govuk-checkboxes__conditional"
                                                : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden"
                                        }
                                        id="conditional-documentBox"
                                    >
                                        <div className="govuk-form-group">
                                            <section className="container">
                                                <div
                                                    {...getRootProps({
                                                        className: "dropzone",
                                                    })}
                                                >
                                                    <input
                                                        {...getInputProps()}
                                                    />
                                                    <p>
                                                        Drag and drop files here
                                                        or click to select files
                                                    </p>
                                                </div>
                                                <aside>
                                                    <h4>Files</h4>
                                                    <ul>{files}</ul>
                                                </aside>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>{" "}
                    </div>
                </div>
                <div className="govuk-grid-row">
                    <div className="govuk-grid-column-full">
                        <div className="govuk-button-group">
                            <Link href="/representation">
                                <a className="govuk-button">Continue</a>
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

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

const mapDispatchToProps = (dispatch) => {
    return {};
};

const selector = formValueSelector("representationForm");

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