import { Disclosure } from "@headlessui/react";
import { observer } from "mobx-react";
// components
import { ListLayout } from "@/components/core/list";
import { ActiveCycleRoot } from "@/buzzwareTech-web/components/cycles";
import { useTranslation } from "@buzzwaretech/i18n";
import { ContentWrapper, ERowVariant } from "@buzzwaretech/ui";
// local imports
import { CyclePeekOverview } from "../cycle-peek-overview";
import { CycleListGroupHeader } from "./cycle-list-group-header";
import { CyclesListMap } from "./cycles-list-map";

export interface ICyclesList {
  completedCycleIds: string[];
  upcomingCycleIds?: string[] | undefined;
  cycleIds: string[];
  workspaceSlug: string;
  projectId: string;
  isArchived?: boolean;
}

export const CyclesList = observer(function CyclesList(props: ICyclesList) {
  const {
    completedCycleIds,
    upcomingCycleIds,
    cycleIds,
    workspaceSlug,
    projectId,
    isArchived = false,
  } = props;
  const { t } = useTranslation();

  return (
    <ContentWrapper variant={ERowVariant.HUGGING} className="flex-row">
      <ListLayout>
        {isArchived ? (
          <>
            <CyclesListMap
              cycleIds={cycleIds}
              projectId={projectId}
              workspaceSlug={workspaceSlug}
            />
          </>
        ) : (
          <>
            <ActiveCycleRoot
              workspaceSlug={workspaceSlug}
              projectId={projectId}
            />

            {upcomingCycleIds && (
              <Disclosure
                as="div"
                className="flex flex-shrink-0 flex-col"
                defaultOpen
              >
                {({ open }) => (
                  <>
                    <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 cursor-pointer border-b border-subtle bg-layer-1">
                      <CycleListGroupHeader
                        title={t("project_cycles.upcoming_cycle.label")}
                        type="upcoming"
                        count={upcomingCycleIds.length}
                        showCount
                        isExpanded={open}
                      />
                    </Disclosure.Button>
                    <Disclosure.Panel>
                      <CyclesListMap
                        cycleIds={upcomingCycleIds}
                        projectId={projectId}
                        workspaceSlug={workspaceSlug}
                      />
                    </Disclosure.Panel>
                  </>
                )}
              </Disclosure>
            )}
            <Disclosure as="div" className="flex flex-shrink-0 flex-col pb-7">
              {({ open }) => (
                <>
                  <Disclosure.Button className="sticky top-0 z-2 w-full flex-shrink-0 cursor-pointer border-b border-subtle bg-layer-1">
                    <CycleListGroupHeader
                      title={t("project_cycles.completed_cycle.label")}
                      type="completed"
                      count={completedCycleIds.length}
                      showCount
                      isExpanded={open}
                    />
                  </Disclosure.Button>
                  <Disclosure.Panel>
                    <CyclesListMap
                      cycleIds={completedCycleIds}
                      projectId={projectId}
                      workspaceSlug={workspaceSlug}
                    />
                  </Disclosure.Panel>
                </>
              )}
            </Disclosure>
          </>
        )}
      </ListLayout>
      <CyclePeekOverview
        projectId={projectId}
        workspaceSlug={workspaceSlug}
        isArchived={isArchived}
      />
    </ContentWrapper>
  );
});