calendar/packages/features/troubleshooter/components/CalendarToggleContainerComponent.tsx

import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Badge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import { Switch } from "@calcom/ui/components/form";
import { TroubleshooterListItemContainer } from "./TroubleshooterListItemContainer";

interface CalendarToggleItemProps {
  title: string;
  subtitle: string;
  colorDot?: string;
  status: "connected" | "not_found";
  calendars?: {
    active?: boolean;
    name?: string;
  }[];
}
function CalendarToggleItem(props: CalendarToggleItemProps) {
  const badgeStatus = props.status === "connected" ? "green" : "orange";
  const badgeText = props.status === "connected" ? "Connected" : "Not found";
  return (
    <TroubleshooterListItemContainer
      title={props.title}
      subtitle={props.subtitle}
      prefixSlot={
        <>
          <div
            className="h-4 w-4 self-center rounded-[4px]"
            style={{
              backgroundColor: props.colorDot,
            }}
          />
        </>
      }
      suffixSlot={
        <div>
          <Badge variant={badgeStatus} withDot size="sm">
            {badgeText}
          </Badge>
        </div>
      }>
      <div className="[&>*]:text-emphasis flex flex-col gap-3">
        {props.calendars?.map((calendar) => {
          return <Switch key={calendar.name} checked={calendar.active} label={calendar.name} disabled />;
        })}
      </div>
    </TroubleshooterListItemContainer>
  );
}

function EmptyCalendarToggleItem({
  installCalendarAction,
}: {
  installCalendarAction?: { href: string } | { onClick: () => void };
}) {
  const { t } = useLocale();

  return (
    <TroubleshooterListItemContainer
      title={t("installed", { count: 0 })}
      subtitle={t("please_install_a_calendar")}
      prefixSlot={
        <>
          <div className="h-4 w-4 self-center rounded-[4px] bg-blue-500" />
        </>
      }
      suffixSlot={
        <div>
          <Badge variant="orange" withDot size="sm">
            {t("unavailable")}
          </Badge>
        </div>
      }>
      {installCalendarAction && (
        <div className="flex flex-col gap-3">
          <Button color="secondary" className="justify-center gap-2" {...installCalendarAction}>
            {t("install_calendar")}
          </Button>
        </div>
      )}
    </TroubleshooterListItemContainer>
  );
}

interface ConnectedCalendarItem {
  credentialId: number;
  integration: {
    name: string;
  };
  error?: {
    message: string;
  };
  calendars?: {
    primary: boolean | null;
    isSelected: boolean;
    name?: string;
  }[];
}

interface CalendarToggleContainerComponentProps {
  connectedCalendars: ConnectedCalendarItem[];
  isLoading: boolean;
  manageCalendarsAction?: { href: string } | { onClick: () => void };
  installCalendarAction?: { href: string } | { onClick: () => void };
}

export function CalendarToggleContainerComponent({
  connectedCalendars,
  isLoading,
  manageCalendarsAction,
  installCalendarAction,
}: CalendarToggleContainerComponentProps): JSX.Element {
  const { t } = useLocale();
  const hasConnectedCalendars = connectedCalendars.length > 0;

  return (
    <div className="flex flex-col stack-y-3">
      <p className="text-sm font-medium leading-none">{t("calendars_were_checking_for_conflicts")}</p>
      {hasConnectedCalendars && !isLoading ? (
        <>
          {connectedCalendars.map((calendar) => {
            const foundPrimary = calendar.calendars?.find((item) => item.primary);
            // Will be used when getAvailbility is modified to use externalId instead of appId for source.
            // const color = SELECTION_COLORS[idx] || "#000000";
            // // Add calendar to color map using externalId (what we use on the backend to determine source)
            // addToColorMap(foundPrimary?.externalId, color);
            return (
              <CalendarToggleItem
                key={calendar.credentialId}
                title={calendar.integration.name}
                colorDot="#000000"
                subtitle={foundPrimary?.name ?? t("nameless_calendar")}
                status={calendar.error ? "not_found" : "connected"}
                calendars={calendar.calendars?.map((item) => {
                  return {
                    active: item.isSelected,
                    name: item.name,
                  };
                })}
              />
            );
          })}
          {manageCalendarsAction && (
            <Button color="secondary" className="justify-center gap-2" {...manageCalendarsAction}>
              {t("manage_calendars")}
            </Button>
          )}
        </>
      ) : (
        <EmptyCalendarToggleItem installCalendarAction={installCalendarAction} />
      )}
    </div>
  );
}