import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { useState } from "react";
import { useDropzone } from "react-dropzone";
import { connect } from "react-redux";
import RepComplete from "./representationComplete";
import RepLPAQuestionnaireCheck_enforcement from "./representationQuestionnairesCheck/representationLPAQuestionnaireCheck_enforcement";
import RepLPAQuestionnaireCheck_s78 from "./representationQuestionnairesCheck/representationLPAQuestionnaireCheck_s78";

import { bytesToSize, getThumbnailIconByExtension } from "../../utils";

const RepCompleteSubmit = (props) => {
    let { t } = useTranslation();
    const [confirmSections, setConfirmSections] = useState(false);

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

    const repFormData = formObj.representationForm.values;

    //const repDate = new Date();

    // let day = repDate.getDate();
    // let month = repDate.getMonth() + 1;
    // let year = repDate.getFullYear();

    // let repType = "";
    // switch (repFormData.representationCapacity) {
    //     case t("myrepresentations:capacity-options-arr-appellant"):
    //         repType = "APP";
    //         break;
    //     case t("myrepresentations:capacity-options-arr-agent"):
    //         repType = "AGENT";
    //         break;
    //     case t("myrepresentations:capacity-options-arr-interested"):
    //         repType = "IP";
    //         break;
    //     case "Land Owner":
    //         repType = "LO";
    //         break;
    //     case "lpa":
    //         repType = "LPA";
    //         break;

    //     default:
    //     // code block
    // }

    // Object.assign(repFormData, {
    //     "repfile_name": repFormData.hasOwnProperty("repfile_name")
    //         ? repFormData.repfile_name
    //         : year +
    //           "-" +
    //           month +
    //           "-" +
    //           day +
    //           "-" +
    //           repDate.getHours() +
    //           repDate.getMinutes() +
    //           repDate.getSeconds() +
    //           "_" +
    //           repType +
    //           "_" +
    //           props.props.props.accountDetails.accountDetails.lastname +
    //           "_" +
    //           props.props.props.accountDetails.accountDetails.firstname,
    //     "pinswg_name": props.props.currentView.caseReference.currentReference,
    //     "containerID": props.props.props.accountDetails.containerID,
    //     "appealType": props.props.currentView.caseReference.appealType,
    //     "incidentID": props.props.currentView.caseReference.incidentid,
    //     "caseRef": props.props.currentView.caseReference.currentReference,
    // });

    console.log("///////// repFormData:", repFormData);

    const whichQuestionnaireCheck = () => {
        {
            switch (currentView.caseReference.appealType) {
                case 846040000:
                case 846040001:
                case 846040006:
                case 846040025:
                case 846040004:
                case 846040018:
                case 846040003:
                case 846040009:
                case 846040008:
                case 846040017:
                    return (
                        <RepLPAQuestionnaireCheck_s78
                            props={props}
                            formObj={formObj}
                            setSubmitBack={setSubmitBack}
                            setShowQuestionnaireSection={
                                setShowQuestionnaireSection
                            }
                            setRepresentationSubmit={setRepresentationSubmit}
                        />
                    );
                    break;
                case 846040005:
                case 846040006:
                case 846040007:
                    return (
                        <RepLPAQuestionnaireCheck_enforcement
                            props={props}
                            formObj={formObj}
                            setSubmitBack={setSubmitBack}
                            setShowQuestionnaireSection={
                                setShowQuestionnaireSection
                            }
                            setRepresentationSubmit={setRepresentationSubmit}
                        />
                    );
                    break;
                default:
                    return <></>;
                    break;
            }
        }
    };

    let buildAppealFilesArray = [];

    let filesUploadObj = props.currentView.fileList;

    // formObj.representationForm.values.representationDocuments;

    for (let key in filesUploadObj) {
        typeof filesUploadObj[key].name != "undefined" &&
            buildAppealFilesArray.push({
                "name": filesUploadObj[key].name,
                "size": filesUploadObj[key].contentLength,
            });
    }

    console.log(
        buildAppealFilesArray,
        formObj.representationForm.values.filesList
    );

    // buildAppealFilesArray = formObj.representationForm.values.hasOwnProperty(
    //     "filesList"
    // )
    //     ? formObj.representationForm.values.filesList
    //     : [];

    let arrUniq = [
        ...new Map(buildAppealFilesArray.map((v) => [v.name, v])).values(),
    ];

    buildAppealFilesArray = buildAppealFilesArray.filter(function (el) {
        return el != null;
    });

    // const arrUniq = buildAppealFilesArray.filter(
    //     (obj1, i, arr) => arr.findIndex((obj2) => obj2.name === obj1.name) === i
    // );

    //arrUniq = arrUniq.concat(filesUploadObj);

    function removeNullObjects(arr) {
        if (arr.length === 0) {
            return arr;
        }
        return arr.filter((obj) => obj !== null);
    }
    function removeEmptyObjects(arr) {
        if (arr.length === 0) {
            return arr;
        }
        return arr.filter(
            (obj) =>
                obj && typeof obj === "object" && Object.keys(obj).length > 0
        );
    }
    arrUniq = removeNullObjects(arrUniq);
    arrUniq = removeEmptyObjects(arrUniq);

    Object.assign(formObj.representationForm.values, {
        "filesList": arrUniq,
    });

    let filterFiles = [];
    return (
        <>
            {currentView.representationSubmitConfirmation == true ? (
                <RepComplete
                    repFormData={repFormData}
                    props={props}
                    setRepresentationMessageSent={setRepresentationMessageSent}
                    setRepresentationReset={setRepresentationReset}
                />
            ) : (
                <div id="rep-appellant">
                    <div className="govuk-grid-column-full">
                        <div className="govuk-grid-row govuk-body">
                            <h1 className="govuk-heading-m ">
                                {" "}
                                {t(
                                    "myrepresentations:rep-check-submit-heading"
                                )}
                            </h1>
                            <dl className="govuk-summary-list ">
                                <h2 className="govuk-heading-m govuk-!-margin-top-9">
                                    {t(
                                        "myrepresentations:rep-check-your-rep-heading"
                                    )}
                                </h2>
                                <div className="govuk-summary-list__row">
                                    <dt className="govuk-summary-list__key">
                                        {t(
                                            "case:representation-representation-type"
                                        )}
                                    </dt>

                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
                                            ? repFormData.representationType ==
                                              "Questionnaire"
                                                ? "Holiadur"
                                                : repFormData.representationType ==
                                                  "Statement"
                                                ? "Datganiad"
                                                : repFormData.representationType ==
                                                  "Final comments"
                                                ? "Sylwadau terfynol"
                                                : repFormData.representationType
                                            : repFormData.representationType}
                                    </dd>

                                    <dd className="govuk-summary-list__actions">
                                        <a
                                            className="govuk-link"
                                            href="#"
                                            onClick={() => {
                                                setSubmitBack();
                                            }}
                                        >
                                            {t("common:change-link-label")}
                                            <span className="govuk-visually-hidden">
                                                {" "}
                                                {/* {FieldsTranslations(
                                                        rows[0].value
                                                    )} */}
                                            </span>
                                        </a>
                                    </dd>
                                </div>
                                {_.has(
                                    repFormData,
                                    "representationOnBehalfOf"
                                ) && (
                                    <>
                                        <div className="govuk-summary-list__row">
                                            <dt className="govuk-summary-list__key">
                                                {t(
                                                    "case:representation-onbehalfof"
                                                )}
                                            </dt>

                                            <dd className="govuk-summary-list__value">
                                                {
                                                    repFormData.representationOnBehalfOf
                                                }
                                            </dd>

                                            <dd className="govuk-summary-list__actions">
                                                <a
                                                    className="govuk-link"
                                                    href="#"
                                                    onClick={() => {
                                                        setSubmitBack();
                                                    }}
                                                >
                                                    {t(
                                                        "common:change-link-label"
                                                    )}
                                                    <span className="govuk-visually-hidden">
                                                        {" "}
                                                        {/* {FieldsTranslations(
                                                        rows[0].value
                                                    )} */}
                                                    </span>
                                                </a>
                                            </dd>
                                        </div>
                                        {repFormData.representationOnBehalfOf ==
                                            "Yes" && (
                                            <div className="govuk-summary-list__row">
                                                <dt className="govuk-summary-list__key">
                                                    {t(
                                                        "case:representation-onbehalfof-details"
                                                    )}
                                                </dt>

                                                <dd className="govuk-summary-list__value">
                                                    {
                                                        repFormData.representationOnBehalfOf_details
                                                    }
                                                </dd>

                                                <dd className="govuk-summary-list__actions">
                                                    <a
                                                        className="govuk-link"
                                                        href="#"
                                                        onClick={() => {
                                                            setSubmitBack();
                                                        }}
                                                    >
                                                        {t(
                                                            "common:change-link-label"
                                                        )}
                                                        <span className="govuk-visually-hidden">
                                                            {" "}
                                                            {/* {FieldsTranslations(
                                                        rows[0].value
                                                    )} */}
                                                        </span>
                                                    </a>
                                                </dd>
                                            </div>
                                        )}
                                    </>
                                )}
                                <div className="govuk-summary-list__row">
                                    <dt className="govuk-summary-list__key">
                                        {t("case:representation-comments")}
                                    </dt>

                                    <dd className="govuk-summary-list__value">
                                        <span
                                            className="multiline-elipsis"
                                            dangerouslySetInnerHTML={{
                                                __html: repFormData.representationComments,
                                            }}
                                        />
                                    </dd>

                                    <dd className="govuk-summary-list__actions">
                                        <a
                                            className="govuk-link"
                                            href="#"
                                            onClick={() => {
                                                setSubmitBack();
                                            }}
                                        >
                                            {t("common:change-link-label")}
                                            <span className="govuk-visually-hidden">
                                                {" "}
                                                {/* {FieldsTranslations(
                                                        rows[0].value
                                                    )} */}
                                            </span>
                                        </a>
                                    </dd>
                                </div>
                                <div className="govuk-summary-list__row">
                                    <dt className="govuk-summary-list__key">
                                        {t("case:representation-files")}
                                    </dt>

                                    <dd className="govuk-summary-list__value">
                                        {arrUniq.length > 0
                                            ? arrUniq.map((blob, i) => (
                                                  <div
                                                      key={blob.name + "_" + i}
                                                      className="govuk-!-margin-bottom-5 fileThumb "
                                                  >
                                                      <img
                                                          src={getThumbnailIconByExtension(
                                                              blob.name
                                                          )}
                                                          alt={blob.name}
                                                          width="50"
                                                      />

                                                      <span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
                                                          {blob.name} (
                                                          {bytesToSize(
                                                              blob.size
                                                          )}
                                                          )
                                                      </span>
                                                  </div>
                                              ))
                                            : ""}
                                    </dd>

                                    <dd className="govuk-summary-list__actions">
                                        <a
                                            className="govuk-link"
                                            href="#"
                                            onClick={() => {
                                                setSubmitBack();
                                            }}
                                        >
                                            {t("common:change-link-label")}
                                            <span className="govuk-visually-hidden">
                                                {" "}
                                                {/* {FieldsTranslations(
                                                        rows[0].value
                                                    )} */}
                                            </span>
                                        </a>
                                    </dd>
                                </div>
                                {repFormData.representationType ==
                                "Questionnaire"
                                    ? whichQuestionnaireCheck()
                                    : ""}
                            </dl>
                            <p>
                                {t(
                                    "myrepresentations:rep-check-tandc-para-one"
                                )}
                            </p>

                            <p>
                                {t(
                                    "myrepresentations:rep-check-tandc-para-two"
                                )}
                            </p>

                            <p>
                                {t(
                                    "myrepresentations:rep-check-tandc-para-three"
                                )}
                            </p>

                            <div className="govuk-form-group">
                                <div className="govuk-checkboxes govuk-checkboxes--small">
                                    <div className="govuk-checkboxes__item">
                                        <input
                                            name="pinswg_checkconfirmation"
                                            id="pinswg_checkconfirmation"
                                            type="checkbox"
                                            className="govuk-checkboxes__input"
                                            value=""
                                            onChange={(e) => {
                                                setConfirmSections(
                                                    !confirmSections
                                                );
                                            }}
                                        />
                                        <label
                                            className="govuk-label govuk-checkboxes__label"
                                            htmlFor="pinswg_checkconfirmation"
                                        >
                                            {t(
                                                "myrepresentations:rep-check-tandc-para-four"
                                            )}
                                        </label>
                                    </div>
                                </div>

                                {/* <Field
                        name="representationType"
                        component={RenderPickList}
                        datafieldname="representationType"
                        optionsArr={appellantApplicantRepresentationArr}
                    /> */}
                            </div>
                        </div>
                        <div className="govuk-grid-row">
                            <div className="govuk-button-group">
                                <button
                                    disabled={confirmSections ? false : true}
                                    type="submit"
                                    className="govuk-button"
                                    data-module="govuk-button"
                                    onClick={() => {
                                        setRepresentationSubmitConfirmation(
                                            true
                                        );
                                        setRepresentationSubmit(true);
                                    }}
                                >
                                    {t("common:continue-button")}
                                </button>
                                {/* <a
                        onClick={() => {
                            setRepresentationSubmit(false);
                        }}
                        className="govuk-button"
                    >
                         {t("common:continue-button")}
                    </a> */}

                                <a
                                    onClick={() => setSubmitBack()}
                                    className="govuk-link"
                                >
                                    {t("case:summary-back-button-label")}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

const mapStateToProps = (state) => {
    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj,
        formData: state.formData,
        appealType: state.appealType,
        currentView: state.currentView,
        myRepresentations: state.myRepresentations,
        initialValues: state.currentView.caseReference.repDetails,
        accountDetails: state.accountDetails,
        //form: state.form,
    };
};

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

export default connect(mapStateToProps, mapDispatchToProps)(RepCompleteSubmit);