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

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

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

    const router = useRouter();
    const { locale } = router;
    const {
        formObj,
        appellantApplicantRepresentationArr,
        setRepresentationCapacity,
        setRepresentationSubmit,
        currentView,
        setSubmitBack,
        setRepresentationSubmitConfirmation,
        setRepresentationMessageSent,
        setRepresentationReset,
    } = 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;

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

    const whichQuestionnaireCheck = () => {
        {
            console.log("curr");
            switch (currentView.caseReference.appealType) {
                case 846040000:
                    return (
                        <RepLPAQuestionnaireCheck_s78
                            props={props}
                            formObj={formObj}
                            setSubmitBack={setSubmitBack}
                        />
                    );
                    break;

                case 846040005:
                    return (
                        <RepLPAQuestionnaireCheck_enforcement
                            props={props}
                            formObj={formObj}
                            setSubmitBack={setSubmitBack}
                        />
                    );
                    break;
                default:
                    return <>hello</>;
                    break;
            }
        }
    };

    return (
        <>
            {currentView.representationSubmitConfirmation == true ? (
                <RepComplete
                    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">
                                        {repFormData.representationType}
                                    </dd>

                                    <dd className="govuk-summary-list__actions">
                                        <a
                                            className="govuk-link"
                                            href="#"
                                            onClick={() => {
                                                setSubmitBack();
                                            }}
                                        >
                                            {t("newappeal: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(
                                                        "newappeal: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(
                                                            "newappeal: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("newappeal: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">
                                        {formObj.representationForm.values.hasOwnProperty(
                                            "representationDocuments"
                                        ) &&
                                        formObj.representationForm.values
                                            .representationDocuments.length > 0
                                            ? formObj.representationForm.values.representationDocuments.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("newappeal:change-link-label")}
                                            <span className="govuk-visually-hidden">
                                                {" "}
                                                {/* {FieldsTranslations(
                                                        rows[0].value
                                                    )} */}
                                            </span>
                                        </a>
                                    </dd>
                                </div>
                                {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">
                                <label
                                    className="govuk-label govuk-body-m"
                                    htmlFor="representationType"
                                >
                                    {" "}
                                    {t(
                                        "myrepresentations:rep-check-tandc-para-four"
                                    )}
                                </label>
                                {/* <Field
                        name="representationType"
                        component={RenderPickList}
                        datafieldname="representationType"
                        optionsArr={appellantApplicantRepresentationArr}
                    /> */}
                            </div>
                        </div>
                        <div className="govuk-grid-row">
                            <div className="govuk-button-group">
                                <button
                                    type="submit"
                                    className="govuk-button"
                                    data-module="govuk-button"
                                    // onClick={() => {
                                    //     setRepresentationSubmitConfirmation();
                                    //     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>
            )}
        </>
    );
};

export default RepCompleteSubmit;