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 Link from "next/link";
import {
    bytesToSize,
    getThumbnailIconByExtension,
    formatDates,
    updateLinks,
} from "../../utils";

import {
    setCurrentReference,
    setCurrentView,
} from "../../../store/currentView/action";

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,
        showQuestionnaireSection,
        questionnaireCount,
        finaliseAppealProcess,
        setCurrentReference,
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
    const files = acceptedFiles.map((file) => (
        <li key={file.path}>
            {file.path} - {file.size} bytes
        </li>
    ));

    let repFormData = formObj.representationForm.values;

    repFormData = updateLinks(repFormData);

    //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 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 = [];

    function showRepsEnded(endDate) {
        let date = new Date();
        date = new Date(date.toDateString());
        const end = new Date(endDate);
        return end > date ? false : true;
    }

    const checkRepDatePassed = () => {
        if (repFormData.representationType == "Questionnaire") {
            return false;
        } else {
            if (repFormData.representationType == "Final comments") {
                return repFormData.hasOwnProperty(
                    "pinswg_finalcommentsduedate"
                ) && showRepsEnded(repFormData.pinswg_finalcommentsduedate)
                    ? true
                    : false;
            }
            if (repFormData.representationType == "Statement") {
                return repFormData.hasOwnProperty("pinswg_statementduedate") &&
                    showRepsEnded(repFormData.pinswg_statementduedate)
                    ? true
                    : false;
            }
        }
    };

    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();
                                                        setCurrentReference({
                                                            "ticketnumber":
                                                                repFormData.ticketnumber,
                                                            "currentReference":
                                                                repFormData.caseRef,
                                                            "currentType":
                                                                "myRepresentations",
                                                            "incidentid":
                                                                repFormData.incidentID,
                                                            "appealType":
                                                                repFormData.appealType,
                                                            "repDetails":
                                                                repFormData,
                                                        });
                                                        setRepresentationSubmit(
                                                            false
                                                        );
                                                    }}
                                                >
                                                    {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();
                                                            setCurrentReference(
                                                                {
                                                                    "ticketnumber":
                                                                        repFormData.ticketnumber,
                                                                    "currentReference":
                                                                        repFormData.caseRef,
                                                                    "currentType":
                                                                        "myRepresentations",
                                                                    "incidentid":
                                                                        repFormData.incidentID,
                                                                    "appealType":
                                                                        repFormData.appealType,
                                                                    "repDetails":
                                                                        repFormData,
                                                                }
                                                            );
                                                            setRepresentationSubmit(
                                                                false
                                                            );
                                                        }}
                                                    >
                                                        {t(
                                                            "common:change-link-label"
                                                        )}
                                                        <span className="govuk-visually-hidden">
                                                            {" "}
                                                            {/* {FieldsTranslations(
                                                        rows[0].value
                                                    )} */}
                                                        </span>
                                                    </a>
                                                </dd>
                                            </div>
                                        )}
                                    </>
                                )}
                                {repFormData.representationType !=
                                    "Questionnaire" && (
                                    <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();

                                                    setCurrentReference({
                                                        "ticketnumber":
                                                            repFormData.ticketnumber,
                                                        "currentReference":
                                                            repFormData.caseRef,
                                                        "currentType":
                                                            "myRepresentations",
                                                        "incidentid":
                                                            repFormData.incidentID,
                                                        "appealType":
                                                            repFormData.appealType,
                                                        "repDetails":
                                                            repFormData,
                                                    });
                                                    setRepresentationSubmit(
                                                        false
                                                    );
                                                }}
                                            >
                                                {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={() => {
                                                repFormData.representationType ==
                                                "Questionnaire"
                                                    ? (setShowQuestionnaireSection(
                                                          questionnaireCount ==
                                                              7
                                                              ? 6
                                                              : 8
                                                      ),
                                                      setRepresentationSubmit(
                                                          false
                                                      ))
                                                    : (setCurrentReference({
                                                          "ticketnumber":
                                                              repFormData.ticketnumber,
                                                          "currentReference":
                                                              repFormData.caseRef,
                                                          "currentType":
                                                              "myRepresentations",
                                                          "incidentid":
                                                              repFormData.incidentID,
                                                          "appealType":
                                                              repFormData.appealType,
                                                          "repDetails":
                                                              repFormData,
                                                      }),
                                                      setRepresentationSubmit(
                                                          false
                                                      ));
                                            }}
                                        >
                                            {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"
                                )}{" "}
                                <Link
                                    href={t("common:footer-privacy-link")}
                                    target="_blank"
                                >
                                    {t(
                                        "common:footer-privacy-notice-link-label"
                                    )}
                                </Link>
                                .
                            </p>
                            <p>
                                {t(
                                    "myrepresentations:rep-check-tandc-para-three"
                                )}
                            </p>
                            {checkRepDatePassed() ? (
                                <div className="govuk-warning-text noticebanner">
                                    <strong className="govuk-warning-text__text">
                                        <span className="govuk-visually-hidden">
                                            Warning
                                        </span>
                                    </strong>
                                    <div>
                                        <div className=" govuk-body-s">
                                            <h2 className="govuk-heading-s">
                                                {t(
                                                    "myrepresentations:rep-period-passed-heading"
                                                )}
                                            </h2>
                                            <p className="govuk-body-s">
                                                {t(
                                                    "myrepresentations:rep-period-notice-label"
                                                )}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            ) : finaliseAppealProcess ? (
                                <div className="">
                                    <h3 className="govuk-heading-m govuk-!-margin-top-9">
                                        {t(
                                            "myrepresentations:rep-finalising-heading"
                                        )}
                                    </h3>
                                    <p className="govuk-body">
                                        {t(
                                            "myrepresentations:rep-finalising-label"
                                        )}
                                    </p>
                                    <p className="govuk-body textloading">
                                        {t("myrepresentations:rep-wait-label")}
                                    </p>
                                </div>
                            ) : (
                                <>
                                    <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>
                                    </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={() => setSubmitBack()}
                                                className="govuk-link"
                                            >
                                                {t(
                                                    "case:summary-back-button-label"
                                                )}
                                            </a>
                                        </div>
                                    </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 {
        setCurrentReference: (currentReference) => {
            dispatch(setCurrentReference(currentReference));
        },
    };
};

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