import { getSystemClassStyles } from '@/hooks/Mapper/components/map/helpers';
import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
import classes from './SystemViewStandalone.module.scss';
import clsx from 'clsx';
import { WithClassName } from '@/hooks/Mapper/types/common.ts';
import { SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
import { HTMLProps, MouseEvent, useCallback, useMemo } from 'react';
import {
  SOLAR_SYSTEM_CLASS_GROUPS,
  SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS,
  WORMHOLES_ADDITIONAL_INFO_BY_CLASS_ID,
} from '@/hooks/Mapper/components/map/constants.ts';

export type SystemViewStandaloneStatic = Pick<
  SolarSystemStaticInfoRaw,
  'class_title' | 'system_class' | 'solar_system_name' | 'region_name' | 'security' | 'solar_system_id'
>;

export type SystemViewStandaloneProps = {
  hideRegion?: boolean;
  customName?: string;
  compact?: boolean;
  onContextMenu?(e: MouseEvent, systemId: string): void;
} & WithClassName &
  Omit<SystemViewStandaloneStatic, 'region_name'> &
  Partial<Pick<SystemViewStandaloneStatic, 'region_name'>> &
  Omit<HTMLProps<HTMLDivElement>, 'onContextMenu'>;

export const SystemViewStandalone = ({
  className,
  hideRegion,
  customName,
  class_title,
  system_class,
  solar_system_name,
  region_name,
  security,
  compact,
  solar_system_id,
  onContextMenu,

  ...props
}: SystemViewStandaloneProps) => {
  const classTitleColor = getSystemClassStyles({ systemClass: system_class, security });
  const isWH = isWormholeSpace(system_class);
  1;

  const systemPreparedName = useMemo(() => {
    const { id: whType, shortTitle } = WORMHOLES_ADDITIONAL_INFO_BY_CLASS_ID[system_class];

    // @ts-ignore
    const spawnClassGroup = SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS[whType];
    if (spawnClassGroup === SOLAR_SYSTEM_CLASS_GROUPS.drifter) {
      return shortTitle;
    }

    return solar_system_name;
  }, [system_class, solar_system_name]);

  const handleClick = useCallback(
    (e: MouseEvent) => {
      e.preventDefault();
      e.stopPropagation();
      onContextMenu?.(e, solar_system_id.toString());
    },
    [onContextMenu, solar_system_id],
  );

  return (
    <div
      {...props}
      onContextMenu={handleClick}
      className={clsx(classes.SystemViewRoot, 'flex gap-1 text-gray-400', className)}
    >
      <span className={clsx(classTitleColor)}>{class_title}</span>
      <span
        className={clsx('text-gray-200 whitespace-nowrap', {
          ['overflow-hidden text-ellipsis']: compact,
          [classes.CompactName]: compact,
        })}
      >
        {customName ?? systemPreparedName}
      </span>
      {!hideRegion && !isWH && <span className="whitespace-nowrap">{region_name}</span>}
    </div>
  );
};