import clsx from "clsx";
import * as React from "react";
import { useSelector } from "react-redux";

import { Tooltip } from "@dndbeyond/character-common-components/es";
import { ThemedPlayButtonSvg } from "@dndbeyond/character-components/es";
import {
  CampaignDataContract,
  CampaignUtils,
  CharacterTheme,
} from "@dndbeyond/character-rules-engine/es";
import ListTimeline from "@dndbeyond/fontawesome-cache/svgs/light/list-timeline.svg";
import { GameLogNotificationWrapper } from "@dndbeyond/game-log-components";

import { Link } from "~/components/Link";

import { useSidebar } from "../../../../contexts/Sidebar";
import { PaneComponentEnum } from "../../../../subApps/sheet/components/Sidebar/types";
import { appEnvSelectors } from "../../Shared/selectors";
import { GameLogState } from "../../Shared/stores/typings";
import { NavigationUtils } from "../../Shared/utils";
import styles from "./styles.module.css";

interface Props {
  campaign: CampaignDataContract | null;
  onCampaignShow?: () => void;
  className?: string;
  gameLog?: GameLogState;
  theme: CharacterTheme;
  isDesktop?: boolean;
}

const CampaignSummary: React.FC<Props> = ({
  campaign,
  onCampaignShow,
  className = "",
  gameLog,
  theme,
  isDesktop,
}) => {
  const {
    pane: { paneHistoryStart },
  } = useSidebar();
  const isReadonly = useSelector(appEnvSelectors.getIsReadonly);

  const handleClick = (evt: React.MouseEvent): void => {
    evt.nativeEvent.stopImmediatePropagation();
    evt.stopPropagation();

    if (onCampaignShow) {
      onCampaignShow();
    }
  };

  const handleGameLogClick = (evt: React.MouseEvent): void => {
    evt.stopPropagation();
    evt.nativeEvent.stopImmediatePropagation();
    // Assuming dispatch is available in props or context
    paneHistoryStart(PaneComponentEnum.GAME_LOG);
  };

  if (isReadonly) return null;

  return (
    <div className={clsx(styles.container)}>
      {campaign && (
        <>
          <div
            className={clsx(styles.campaignSummary)}
            onClick={handleClick}
            data-testid="campaign-summary"
          >
            <span className={clsx(styles.summaryLabel)}>Campaign:</span>
            <span className={clsx(styles.summaryName)}>
              {CampaignUtils.getName(campaign)}
            </span>
          </div>
          <Tooltip title="Launch Game" isDarkMode={theme.isDarkMode}>
            <Link
              href={NavigationUtils.getLaunchGameUrl(campaign)}
              target="_blank"
              aria-label="Launch Game"
            >
              <div className={clsx(styles.campaignButtonGroup)}>
                <div className={clsx(styles.campaignButton)}>
                  <ThemedPlayButtonSvg
                    className={clsx([
                      styles.campaignButtonIcon,
                      styles.campaignPlayButtonIcon,
                    ])}
                    theme={theme}
                  />
                </div>
              </div>
            </Link>
          </Tooltip>
        </>
      )}
      {isDesktop && (
        <GameLogNotificationWrapper
          themeColor={theme.themeColor}
          gameLogIsOpen={gameLog?.isOpen ?? false}
          notificationOnClick={handleGameLogClick}
        >
          <Tooltip title="Game Log" isDarkMode={theme.isDarkMode}>
            <div
              role="button"
              aria-roledescription="Game Log"
              className={clsx([
                styles.campaignButtonGroup,
                styles.soloGameLogButton,
              ])}
              onClick={handleGameLogClick}
            >
              <div className={clsx(styles.campaignButton)}>
                <ListTimeline className={clsx(styles.campaignButtonIcon)} />
              </div>
            </div>
          </Tooltip>
        </GameLogNotificationWrapper>
      )}
    </div>
  );
};

export default CampaignSummary;