import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { Field, reduxForm } from "redux-form";
import {
    RenderPickList,
    RenderTextfield,
    RenderRadioList,
    RenderMultiline,
} from "./representationElements";
import {
    setRepresentationCapacity,
    setRepresentationSubmit,
} from "../../../store/currentView/action";
import { useDropzone } from "react-dropzone";

const RepAgent = (props) => {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;
    const {
        formObj,
        appellantApplicantRepresentationArr,
        setRepresentationCapacity,
        setRepresentationSubmit,
        currentView,
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
    const files = acceptedFiles.map((file) => (
        <li key={file.path}>
            {file.path} - {file.size} bytes
        </li>
    ));

    return (
        <div id="rep-appellant">
            <div className="govuk-grid-column-full">
                <div className="govuk-grid-row">
                    <h2 className="govuk-heading-m ">Representation - agent</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"
                            optionsArr={appellantApplicantRepresentationArr}
                        />
                    </div>
                </div>
                <div className="govuk-grid-row">
                    <div className="govuk-form-group">
                        <Field
                            className="govuk-input govuk-!-width-three-quarters"
                            id="representationDescription"
                            name="representationDescription"
                            value="email"
                            data-aria-controls="representationDescription"
                            type="text"
                            component={RenderTextfield}
                            label="Description of representation"
                        />
                    </div>
                </div>
                <div className="govuk-grid-row">
                    <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">
                                        <Field
                                            name="representationComments"
                                            id="representationComments"
                                            component={RenderMultiline}
                                            type="text"
                                            rows="5"
                                            className="govuk-textarea govuk-input--width-30"
                                            aria-describedby={
                                                props.name + "-hint"
                                            }
                                        />
                                    </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"
                                        htmlFor="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 className="govuk-grid-row">
                    <div className="govuk-button-group">
                        <button
                            type="submit"
                            className="govuk-button"
                            data-module="govuk-button"
                        >
                            Continue
                        </button>
                        {/* <a
                            onClick={() => {
                                setRepresentationSubmit(false);
                            }}
                            className="govuk-button"
                        >
                            Continue
                        </a> */}

                        <a
                            onClick={() => {
                                setRepresentationCapacity("false");
                            }}
                            className="govuk-link"
                        >
                            Back
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default RepAgent;