import { type FC } from 'react';

import {
  IconArrowsSplit2,
  IconBolt,
  IconClipboardCheck,
  IconClipboardList,
  IconSettingsCheck,
  type TablerIcon,
} from '@material-hu/icons/tabler';
import { Stack } from '@material-hu/mui';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import useCommunityFeature from 'src/hooks/useCommunityFeature';
import { type CommunityFeature } from 'src/types/communityFeatures';
import { NodeType } from 'src/types/workflows';
import { useLokaliseTranslation } from 'src/utils/i18n';

import {
  getCommunityFeatureForNodeType,
  isFreemiumIncludedNodeType,
} from '../utils';

import ActionInfoPillTooltip from './ActionInfoPillTooltip';

type NodeCardProps = {
  type: NodeType;
  title: string;
  description?: string;
  copetin?: string;
  edgeId?: string;
  disabled?: boolean;
  onClick?: () => void;
};

const getProps = (
  type: NodeType,
  enabledCommunityFeature: boolean,
): {
  Icon: TablerIcon;
  color: 'primary' | 'warning' | 'highlight' | 'error' | 'success' | 'default';
  enabledFeature: boolean;
} => {
  const isFreemiumIncluded = isFreemiumIncludedNodeType(type);
  const enabledFeature = isFreemiumIncluded ? true : enabledCommunityFeature;
  switch (type) {
    case NodeType.TRIGGER:
      return {
        Icon: IconBolt,
        color: 'primary',
        enabledFeature,
      };
    case NodeType.CONDITIONAL:
      return {
        Icon: IconArrowsSplit2,
        color: 'warning',
        enabledFeature,
      };
    case NodeType.APPROVAL:
      return {
        Icon: IconClipboardCheck,
        color: 'highlight',
        enabledFeature,
      };
    case NodeType.CHANGE_ASSIGNEE:
      return {
        Icon: IconSettingsCheck,
        color: 'highlight',
        enabledFeature,
      };
    case NodeType.TASK:
    default:
      return {
        Icon: IconClipboardList,
        color: 'highlight',
        enabledFeature,
      };
  }
};

const NodeCard: FC<NodeCardProps> = ({
  type,
  title,
  description,
  copetin,
  onClick,
  disabled = false,
}) => {
  const { t } = useLokaliseTranslation('workflows');

  const enabledCommunityFeature = useCommunityFeature(
    getCommunityFeatureForNodeType(type) as CommunityFeature,
  );

  const { Icon, color, enabledFeature } = getProps(
    type,
    enabledCommunityFeature,
  );

  const disabledCard = disabled || !enabledFeature;

  return (
    <HuCardContainer
      sx={{
        width: 292,
        minHeight: 72,
        cursor: disabledCard ? 'default' : 'pointer',
        ':hover': {
          boxShadow: disabledCard ? 0 : 1,
        },
      }}
      onClick={disabledCard ? undefined : onClick}
      noHover
    >
      <HuTooltip
        description={t('new_node_disabled')}
        direction="bottom"
        disableTooltip={!disabledCard || !enabledFeature}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: 1,
          }}
        >
          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 1,
                opacity: disabledCard ? 0.5 : 1,
              }}
            >
              <HuAvatar
                variant="square"
                color={color}
                Icon={Icon}
              />
              <HuTitle
                variant="S"
                title={title}
                description={description}
                copetin={copetin}
              />
            </Stack>
            {!enabledFeature && <ActionInfoPillTooltip type="premium" />}
          </Stack>
        </Stack>
      </HuTooltip>
    </HuCardContainer>
  );
};

export default NodeCard;