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 = ({
    progObj,
    titleList,
    currentSection,
    documentListObj,
    formObjXML,
    mandatoryFieldsData,
    gotoSection,
    setCurrentSection,
    props: outerProps,
}) => {
    const { t } = useTranslation();
    const router = useRouter();
    const { locale } = router;

    // Helper to safely access nested form values
    const getFormValue = (field) =>
        outerProps?.props?.form?.appealForm?.values?.[field];

    const renderDocumentList = () => {
        const formValues = outerProps?.props?.form?.appealForm?.values || {};

        return (
            <>
                <li>{t("newappeal:application-form")}</li>

                {formValues.pinswg_developmentdescriptionchanged === "true" && (
                    <li>Description of development change confirmation</li>
                )}

                {formValues.pinswg_caseworkreason === "846040005" && (
                    <li>{t("newappeal:registration-of-application-letter")}</li>
                )}

                {formValues.pinswg_caseworkreason === "846040000" && (
                    <li>Decision notice</li>
                )}

                {formValues.pinswg_attachsoc === "true" && (
                    <li>{t("newappeal:statement-of-case")}</li>
                )}

                {formValues.pinswg_attachcostapplication === "true" && (
                    <li>{t("newappeal:cost-application")}</li>
                )}

                {formValues.pinswg_s106unilateralsubmitted === "true" && (
                    <li>Planning obligation (S106/Unilateral)</li>
                )}

                {/* Additional document list items from documentListObj if needed */}
                {/* {Object.entries(documentListObj).map(([key, value]) => (
          <li key={key}>{value}</li>
        ))} */}

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

    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">
                        {
                            outerProps?.props?.appealType?.caseReference
                                ?.ticketnumber
                        }
                    </span>
                </h2>

                <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) => {
                            const step = progObj[index];
                            const stepId = FieldsTranslations(step.title)
                                .toString()
                                .replace(/\s+/g, "-")
                                .toLowerCase();

                            return (
                                <li
                                    key={key}
                                    className={`app-step-nav__step js-step app-step-nav__step--active ${
                                        step.allFieldsComplete
                                            ? "sectionComplete"
                                            : "sectionIncomplete"
                                    }`}
                                    aria-current="step"
                                    data-show=""
                                    id={stepId}
                                >
                                    <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={(e) => {
                                                        e.preventDefault();
                                                        gotoSection(
                                                            parseInt(key, 10) +
                                                                1
                                                        );
                                                    }}
                                                    className="app-step-nav__button app-step-nav__button--title js-step-title-button"
                                                    aria-expanded="false"
                                                    aria-controls={`step-panel-${stepId}`}
                                                >
                                                    <span className="js-step-title-text govuk-!-font-size-16">
                                                        {FieldsTranslations(
                                                            step.title
                                                        )}{" "}
                                                    </span>
                                                </a>
                                            </span>
                                        </h3>
                                    </div>
                                </li>
                            );
                        })}
                    </ol>
                </div>
            </nav>

            <section>
                <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">
                    <li className="at-nav__page">
                        <ol className="govuk-list govuk-list--bullet">
                            {renderDocumentList()}
                        </ol>
                    </li>
                </ol>
            </section>
        </>
    );
};

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

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

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