import { setEventDetails } from "../../store/searchOutput/action";
import { setCurrentPage } from "../../store/currentView/action";
import { connect } from "react-redux";
import useTranslation from "next-translate/useTranslation";
import { formatDates } from "../utils";
import { useState } from "react";
import { getStagesForAppealType } from "./summary/utils/caseStagesByAppealType";

const statusClassMap = {
    complete: "govuk-tag govuk-!-margin-top-2",
    "in-progress": "govuk-tag govuk-tag--yellow govuk-!-margin-top-2",
    "not-started": "govuk-tag govuk-tag--grey govuk-!-margin-top-2",
    blocked: "govuk-tag govuk-tag--red govuk-!-margin-top-2"
};

const statusTextMap = {
    complete: "status-complete",
    "in-progress": "status-in-progress",
    "not-started": "status-not-started",
    blocked: "status-blocked"
};

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

    const specialistProcess =
        props.searchResultsObj?.searchDetailsObj[0]?.value[0]
            ?.pinswg_specialistcaseprocess;

    console.log(props.currentView?.caseReference?.statuscode);

    const stages = getStagesForAppealType(
        props.currentView?.caseReference?.appealType,
        props.currentView?.caseReference?.statuscode,
        specialistProcess
    );

    const EventView = (eventsArr) => {
        eventsArr = eventsArr.value;

        return eventsArr.map((item, key) => {
            <div>{item.pinswg_name}</div>;
        });
    };

    const eventsArr = props.eventsObj?.value || [];

    // event publishiing flag set to true displa

    function hasOwnPropertyAndNotNull(obj, property) {
        return obj.hasOwnProperty(property) && obj[property] !== null;
    }

    const [expandAll, setExpandAll] = useState(null);
    // null = use default (in-progress open)
    // true = force open all
    // false = force close all

    const handleToggleAll = () => {
        setExpandAll((prev) => (prev === true ? false : true));
    };

    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <h2 className="govuk-heading-m ">
                        {t("case:status-title")}
                    </h2>

                    <button
                        type="button"
                        className="govuk-!-margin-bottom-3 govuk-link watchCase govuk-!-font-size-16 "
                        onClick={handleToggleAll}
                    >
                        {expandAll === true
                            ? t("case:status-hide-all-label")
                            : t("case:status-show-all-label")}
                    </button>
                    <ul className="govuk-task-list">
                        {stages.map((stage) => {
                            const isDefaultOpen =
                                stage.status === "in-progress";

                            const isOpen =
                                expandAll === null ? isDefaultOpen : expandAll;

                            return (
                                <li
                                    className="govuk-task-list__item"
                                    key={stage.id}
                                >
                                    <div className="govuk-task-list__name-and-hint">
                                        {stage.descriptionKey && (
                                            <details
                                                className="govuk-details govuk-!-margin-top-2 govuk-!-margin-bottom-2"
                                                open={isOpen}
                                            >
                                                <summary className="govuk-details__summary">
                                                    <span className="govuk-details__summary-text">
                                                        {t(
                                                            `case-stages:${stage.titleKey}`
                                                        )}
                                                    </span>
                                                </summary>
                                                <div className="govuk-details__text">
                                                    {t(
                                                        `case-stages:${stage.descriptionKey}`
                                                    )}
                                                </div>
                                            </details>
                                        )}
                                    </div>

                                    <div
                                        className="govuk-task-list__status "
                                        id={`${stage.id}-status`}
                                    >
                                        <strong
                                            className={
                                                statusClassMap[stage.status] ||
                                                "govuk-tag govuk-tag--grey govuk-!-margin-top-2"
                                            }
                                        >
                                            {t(
                                                `case-stages:${
                                                    statusTextMap[
                                                        stage.status
                                                    ] || "status-not-started"
                                                }`
                                            )}
                                        </strong>
                                    </div>
                                </li>
                            );
                        })}
                    </ul>
                </div>
            </div>
        </div>
    );
};

const mapStateToProps = (state) => {
    return {
        ...state
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setEventDetails: (eventsObj) => {
            dispatch(setEventDetails(eventsObj));
        },
        setCurrentPage: (currentPage) => {
            dispatch(setCurrentPage(currentPage));
        }
    };
};

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