import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import { setCurrentSection } from "../../store/appealType/action";
import { FieldsTranslations } from "../elements";

const BuildProgress = (props) => {
    let { t } = useTranslation();
    const router = useRouter();
    const { locale } = router;

    const {
        progObj,
        titleList,
        currentSection,
        documentListObj,
        formObjXML,
        mandatoryFieldsData,
        gotoSection,
        setCurrentSection,
    } = props;
    const parser = new DOMParser();

    //const progObj = getProgressObj(
    //     formObjXML,
    //     titleList,
    //     mandatoryFieldsData,
    //     props
    // );

    //console.log(progObj);

    return (
        <>
            <nav
                role="navigation"
                aria-label="progress-list"
                className="at-nav"
            >
                <h2 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey progress-heading">
                    {t("newappeal:new-appeal-progress-nav-label")}:{" "}
                    <span className="progress-case-reference">
                        {props.props.appealType.caseReference.ticketnumber}
                    </span>
                </h2>

                {/* <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" /> */}

                <div
                    id="step-by-step-navigation"
                    data-module="gemstepnav"
                    className="app-step-nav  app-step-nav--active"
                    data-id="e01e924b-9c7c-4c71-8241-66a575c2f61f"
                    data-show-text="show"
                    data-hide-text="hide"
                    data-show-all-text="Show all"
                    data-hide-all-text="Hide all"
                >
                    <ol className="app-step-nav__steps">
                        {Object.keys(progObj).map((key, index) => (
                            <li
                                key={key}
                                className={
                                    "app-step-nav__step js-step app-step-nav__step--active" +
                                    (progObj[index].allFieldsComplete
                                        ? " sectionComplete"
                                        : " sectionIncomplete")
                                }
                                aria-current="step"
                                data-show=""
                                id={FieldsTranslations(progObj[index].title)
                                    .toString()
                                    .replace(/\s+/g, "-")
                                    .toLowerCase()}
                            >
                                <div
                                    className="app-step-nav__header js-toggle-panel "
                                    data-position={index}
                                >
                                    <h3 className="app-step-nav__title ">
                                        <span className="app-step-nav__circle app-step-nav__circle--number">
                                            <span className="app-step-nav__circle-inner">
                                                <span className="app-step-nav__circle-background">
                                                    <span className="app-step-nav__circle-step-label govuk-visually-hidden">
                                                        Step
                                                    </span>{" "}
                                                    {index + 1}
                                                    <span
                                                        className="app-step-nav__circle-step-colon govuk-visually-hidden"
                                                        aria-hidden="true"
                                                    >
                                                        :
                                                    </span>
                                                </span>
                                            </span>
                                        </span>

                                        <span className="js-step-title">
                                            <a
                                                href="#"
                                                onClick={() => {
                                                    gotoSection(
                                                        parseInt(key) + 1
                                                    );
                                                }}
                                                className="app-step-nav__button app-step-nav__button--title js-step-title-button"
                                                aria-expanded="false"
                                                aria-controls={
                                                    "step-panel-" +
                                                    FieldsTranslations(
                                                        progObj[index].title
                                                    )
                                                        .toString()
                                                        .replace(/\s+/g, "-")
                                                        .toLowerCase()
                                                }
                                            >
                                                <span className="js-step-title-text govuk-!-font-size-16">
                                                    {FieldsTranslations(
                                                        progObj[index].title
                                                    )}{" "}
                                                </span>
                                            </a>
                                        </span>
                                    </h3>
                                </div>
                            </li>
                        ))}
                        {/* <li
                            className={
                                "app-step-nav__step js-step app-step-nav__step--active"
                            }
                        >
                            <div
                                className="app-step-nav__header js-toggle-panel "
                                data-position={10}
                            >
                                <h3 className="app-step-nav__title ">
                                    <span className="app-step-nav__circle app-step-nav__circle--number">
                                        <span className="app-step-nav__circle-inner">
                                            <span className="app-step-nav__circle-background">
                                                <span className="app-step-nav__circle-step-label govuk-visually-hidden">
                                                    Step
                                                </span>{" "}
                                                {progObj.length + 1}
                                                <span
                                                    className="app-step-nav__circle-step-colon govuk-visually-hidden"
                                                    aria-hidden="true"
                                                >
                                                    :
                                                </span>
                                            </span>
                                        </span>
                                    </span>

                                    <span className="js-step-title">
                                        <a
                                            href="#"
                                            onClick={() => {
                                                gotoSection(progObj.length + 1);
                                            }}
                                            className="app-step-nav__button app-step-nav__button--title js-step-title-button"
                                            aria-expanded="false"
                                            aria-controls={
                                                "step-panel-confirmation"
                                            }
                                        >
                                            <span className="js-step-title-text govuk-!-font-size-16">
                                                Confirmation
                                            </span>
                                        </a>
                                    </span>
                                </h3>
                            </div>
                        </li> */}
                    </ol>
                </div>
            </nav>

            <div>
                <h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
                    {t("newappeal:new-appeal-documentlist-nav")}:
                </h3>
                <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
                <ol className="govuk-list document-list">
                    <ul className="govuk-list ">
                        <li className="at-nav__page">
                            <ol className="govuk-list govuk-list--bullet">
                                <li>{t("newappeal:application-form")}</li>

                                {props.props.props.form.hasOwnProperty(
                                    "appealForm"
                                ) &&
                                props.props.props.form[
                                    "appealForm"
                                ].hasOwnProperty("values") &&
                                props.props.props.form[
                                    "appealForm"
                                ].values.hasOwnProperty(
                                    "pinswg_developmentdescriptionchanged"
                                )
                                    ? props.props.props.form["appealForm"]
                                          .values
                                          .pinswg_developmentdescriptionchanged ==
                                          "true" && (
                                          <li>
                                              Description of development change
                                              confirmation
                                          </li>
                                      )
                                    : ""}

                                {props.props.props.form.hasOwnProperty(
                                    "appealForm"
                                ) &&
                                props.props.props.form[
                                    "appealForm"
                                ].hasOwnProperty("values") &&
                                props.props.props.form[
                                    "appealForm"
                                ].values.hasOwnProperty("pinswg_caseworkreason")
                                    ? props.props.props.form["appealForm"]
                                          .values.pinswg_caseworkreason ==
                                          "846040005" && (
                                          <li>
                                              {t(
                                                  "newappeal:registration-of-application-letter"
                                              )}
                                          </li>
                                      )
                                    : ""}

                                {props.props.props.form.hasOwnProperty(
                                    "appealForm"
                                ) &&
                                props.props.props.form[
                                    "appealForm"
                                ].hasOwnProperty("values") &&
                                props.props.props.form[
                                    "appealForm"
                                ].values.hasOwnProperty("pinswg_caseworkreason")
                                    ? props.props.props.form["appealForm"]
                                          .values.pinswg_caseworkreason ==
                                          "846040000" && (
                                          <li>Decision notice</li>
                                      )
                                    : ""}

                                {props.props.props.form.hasOwnProperty(
                                    "appealForm"
                                ) &&
                                props.props.props.form[
                                    "appealForm"
                                ].hasOwnProperty("values") &&
                                props.props.props.form[
                                    "appealForm"
                                ].values.hasOwnProperty("pinswg_attachsoc")
                                    ? props.props.props.form["appealForm"]
                                          .values.pinswg_attachsoc ==
                                          "true" && (
                                          <li>
                                              {t("newappeal:statement-of-case")}
                                          </li>
                                      )
                                    : ""}

                                {props.props.props.form.hasOwnProperty(
                                    "appealForm"
                                ) &&
                                props.props.props.form[
                                    "appealForm"
                                ].hasOwnProperty("values") &&
                                props.props.props.form[
                                    "appealForm"
                                ].values.hasOwnProperty(
                                    "pinswg_attachcostapplication"
                                )
                                    ? props.props.props.form["appealForm"]
                                          .values
                                          .pinswg_attachcostapplication ==
                                          "true" && (
                                          <li>
                                              {t("newappeal:cost-application")}
                                          </li>
                                      )
                                    : ""}

                                {props.props.props.form.hasOwnProperty(
                                    "appealForm"
                                ) &&
                                props.props.props.form[
                                    "appealForm"
                                ].hasOwnProperty("values") &&
                                props.props.props.form[
                                    "appealForm"
                                ].values.hasOwnProperty(
                                    "pinswg_s106unilateralsubmitted"
                                )
                                    ? props.props.props.form["appealForm"]
                                          .values
                                          .pinswg_s106unilateralsubmitted ==
                                          "true" && (
                                          <li>
                                              Planning obligation
                                              (S106/Unilateral)
                                          </li>
                                      )
                                    : ""}

                                {/* {Object.keys(documentListObj).length > 0 &&
                                    Object.entries(documentListObj).map(
                                        ([key, value]) => {
                                            return <li key={key}>{value}</li>;
                                        }
                                    )} */}

                                <li>{t("newappeal:site-location-plan")}</li>
                            </ol>
                        </li>
                    </ul>
                </ol>
            </div>
        </>
    );
};

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

const mapDispatchToProps = (dispatch) => {
    return {
        gotoSection: (thisSection) => {
            dispatch(setCurrentSection(thisSection));
        },
    };
};

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