import useTranslation from "next-translate/useTranslation";
import { useState } from "react";
import { getLifecycleStagesForCase } from "../../lib/domain/case-lifecycle";

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 caseResult = props.searchResultsObj?.value?.[0];
    const caseDetails = props.searchDetailsObj?.[0]?.value?.[0];

    const statusCode = Number(caseResult?.statuscode);
    const appealType = Number(caseResult?.pinswg_appealcasetype);

    const specialistProcess = caseDetails?.pinswg_specialistcaseprocess;

    const stages = getLifecycleStagesForCase(
        appealType,
        statusCode,
        specialistProcess
    );

    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>
    );
};

export default StatusDetails;