import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import { Field, change, reduxForm } from "redux-form";
import { useEffect, useState } from "react";

import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
import {
    FileUploadField,
    RenderCondtionalRadioList,
    RenderRichMultiline,
    shouldDisableButton
} from "./representationElements";
import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";

import { useDropzone } from "react-dropzone";
import {
    setRepresentationCapacity,
    setRepresentationSubmit,
    setFilesForRepresentations
} from "../../../store/currentView/action";

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

    const router = useRouter();
    const { locale } = router;
    const {
        formObj,
        appellantApplicantRepresentationArr,
        setRepresentationCapacity,
        setRepresentationSubmit,
        currentView,
        setRepFileName,
        updateRepresentation,
        setSavingStatus,
        savingStatus,
        setFilesForRepresentations,
        onRepresentationTypeChange,
        onTypeSelectionConfirmed
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();

    const persistedRepresentationType =
        currentView?.caseReference?.repDetails?.representationType;
    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
        !!persistedRepresentationType
    );

    useEffect(() => {
        if (persistedRepresentationType) {
            setTypeSelectionConfirmed(true);
        }
    }, [persistedRepresentationType]);

    if (JSON.stringify(formObj) != "{}") {
        setRepFileName(formObj.representationForm.values);

        let filterFilesList = props.currentView.caseReference.hasOwnProperty(
            "repDetails"
        )
            ? props.currentView.caseReference.repDetails.hasOwnProperty(
                  "filesList"
              )
                ? props.currentView.caseReference.repDetails.filesList.filter(
                      function (el) {
                          return el != null;
                      }
                  )
                : []
            : [];

        const files = acceptedFiles.map((file) => (
            <li key={file.path}>
                {file.path} - {file.size} bytes
            </li>
        ));
        const required = (value) => (value ? undefined : "Required");

        const selectedRepresentationType =
            formObj?.representationForm?.values?.representationType ||
            props.representationType;

        const isTypeConfirmed =
            !!selectedRepresentationType && typeSelectionConfirmed;

        const selectedRepresentationTypeDisplay =
            router.locale == "cy"
                ? selectedRepresentationType == "Questionnaire"
                    ? "Holiadur"
                    : selectedRepresentationType == "Statement"
                      ? "Datganiad"
                      : selectedRepresentationType == "Final comments"
                        ? "Sylwadau terfynol"
                        : selectedRepresentationType
                : selectedRepresentationType;

        return (
            <>
                <RepresentationTypeSelectorBlock
                    t={t}
                    headingText={t(
                        "myrepresentations:consultation-from-an-agent-heading"
                    )}
                    kindLabelText={t(
                        "myrepresentations:kind-of-consultation-label"
                    )}
                    isTypeSelected={isTypeConfirmed}
                    selectedTypeDisplay={selectedRepresentationTypeDisplay}
                    representationType={selectedRepresentationType}
                    setTypeSelectionConfirmed={setTypeSelectionConfirmed}
                    onRepresentationTypeChange={onRepresentationTypeChange}
                    onTypeSelectionConfirmed={onTypeSelectionConfirmed}
                    optionsArr={appellantApplicantRepresentationArr}
                />
                {isTypeConfirmed && (
                    <>
                        <div className="govuk-grid-row">
                            <div className="govuk-form-group">
                                <Field
                                    name="representationOnBehalfOf"
                                    datafieldname="representationOnBehalfOf"
                                    // label={t("myrepresentations:capacity-select-what-capacity-label")}
                                    options={["Yes", "No"]}
                                    id="representationOnBehalfOf"
                                    className="govuk-radios__input"
                                    errorMsg={t(
                                        "myrepresentations:select-an-option-label"
                                    )}
                                    component={RenderCondtionalRadioList}
                                    validate={[required]}
                                    legend={t("case:representation-onbehalfof")}
                                    hint={t(
                                        "myrepresentations:representation-onbehalfof-hint"
                                    )}
                                />
                            </div>
                        </div>

                        <div className="govuk-grid-row">
                            <div className="govuk-form-group">
                                <p className="govuk-body">
                                    {selectedRepresentationType ==
                                    "Consultation Response"
                                        ? t(
                                              "myrepresentations:enter-comment-label"
                                          )
                                        : t(
                                              "myrepresentations:consultation-comment-label"
                                          )}
                                </p>
                                <fieldset
                                    className="govuk-fieldset"
                                    aria-describedby="commentBox-hint"
                                >
                                    {selectedRepresentationType ==
                                        "Consultation Response" && (
                                        <div className="govuk-form-group">
                                            <Field
                                                name="representationComments"
                                                id="representationComments"
                                                component={RenderRichMultiline}
                                                type="text"
                                                rows="5"
                                                className="govuk-textarea govuk-input--width-30"
                                                aria-describedby={
                                                    props.name + "-hint"
                                                }
                                            />
                                            {formObj.representationForm.values
                                                .appealType == "846040004" ? (
                                                <p className="govuk-hint govuk-!-font-size-14 govuk-!-margin-top-5">
                                                    {t(
                                                        "myrepresentations:publish-policy-label"
                                                    )}{" "}
                                                    <a
                                                        href={t(
                                                            "myrepresentations:publish-policy-link"
                                                        )}
                                                    >
                                                        {t(
                                                            "myrepresentations:publish-policy-link-label"
                                                        )}
                                                    </a>{" "}
                                                    {t(
                                                        "myrepresentations:publish-policy-label-two"
                                                    )}
                                                </p>
                                            ) : (
                                                <p className="govuk-hint govuk-!-font-size-14 govuk-!-margin-top-5">
                                                    {t(
                                                        "myrepresentations:publish-policy-label"
                                                    )}{" "}
                                                    <a
                                                        href={t(
                                                            "myrepresentations:publish-policy-link"
                                                        )}
                                                    >
                                                        {t(
                                                            "myrepresentations:publish-policy-link-label"
                                                        )}
                                                    </a>{" "}
                                                    {t(
                                                        "myrepresentations:publish-policy-label-two"
                                                    )}
                                                </p>
                                            )}
                                        </div>
                                    )}
                                    <div className="govuk-form-group govuk-!-margin-bottom-9">
                                        <FileUploadField
                                            name={"representationDocuments"}
                                            id={"representationDocuments"}
                                            label={t(
                                                "myrepresentations:add-files-label"
                                            )}
                                            ticketnumber={
                                                props.currentView.caseReference
                                                    .ticketnumber
                                            }
                                            hint={"sdsd"}
                                            fileList={
                                                props.currentView.fileList

                                                // props.currentView.caseReference.hasOwnProperty(
                                                //     "repDetails"
                                                // )
                                                //     ? props.currentView.caseReference.repDetails.hasOwnProperty(
                                                //           "filesList"
                                                //       ) &&
                                                //       props.currentView
                                                //           .caseReference
                                                //           .repDetails.filesList
                                                //           .length > 0
                                                //         ? props.currentView
                                                //               .caseReference
                                                //               .repDetails
                                                //               .filesList
                                                //         : []
                                                //     : []
                                            }
                                            setFilesForRepresentations={
                                                setFilesForRepresentations
                                            }
                                            containerID={
                                                props.props.props.accountDetails
                                                    .containerID
                                            }
                                            filenamePrefix={props.formObj}
                                            props={props.props.props}
                                            setCurrentReference={
                                                props.setCurrentReference
                                            }
                                        />
                                    </div>
                                </fieldset>
                            </div>{" "}
                        </div>
                    </>
                )}
                {isTypeConfirmed && (
                    <div className="govuk-grid-row">
                        <div className="govuk-button-group">
                            <button
                                type="submit"
                                className="govuk-button"
                                data-module="govuk-button"
                                disabled={shouldDisableButton({
                                    props,
                                    formObj
                                })}
                            >
                                {t("common:continue-button")}
                            </button>
                            {/* {router.query.state != "edit" && (
                            <a
                                onClick={() => {
                                    setRepresentationCapacity();
                                    props.updateField(
                                        "representationForm",
                                        "representationCapacity",
                                        ""
                                    );
                                }}
                                className="govuk-link"
                            >
                                {t("common:back-link")}
                            </a>
                        )} */}
                            {savingStatus ? (
                                <span className=" progress-save-active">
                                    {router.locale == "cy"
                                        ? "Nôl data"
                                        : "Saving data"}
                                    <img
                                        className="data-loading-icon"
                                        src="/assets/images/loading.gif"
                                        alt={
                                            router.locale == "cy"
                                                ? "Nôl data"
                                                : "Saving data"
                                        }
                                    />
                                </span>
                            ) : (
                                <button
                                    className="govuk-button progress-save "
                                    onClick={() => {
                                        let valuesObj =
                                            props.props.props.form[props.form]
                                                .values || {};

                                        //console.log("valuesobj:", valuesObj);

                                        delete valuesObj[
                                            "_pinswg_appellant_value"
                                        ];

                                        //console.log("on save:", valuesObj);
                                        updateRepresentation(
                                            valuesObj,
                                            false,
                                            true
                                        );
                                    }}
                                >
                                    {t("common:save-exit-button")}
                                </button>
                            )}
                        </div>
                    </div>
                )}
            </>
        );
    }
};

const mapDispatchToProps = (dispatch) => ({
    updateField: (form, field, newValue) =>
        dispatch(change(form, field, newValue)),

    setFilesForRepresentations: (fileList) => {
        dispatch(setFilesForRepresentations(fileList));
    }
});

export default connect(
    null,
    mapDispatchToProps
)(
    reduxForm({
        form: "representationForm",
        enableReinitialize: true,
        destroyOnUnmount: false
    })(ConsultationAgent)
);