import { useMemo } from 'react';

import Avatar, { type AvatarProps } from '@design-system/Avatar';
import { Stack, type StackProps } from '@mui/material';
import {
  IconCheck,
  IconDots,
  IconExclamationCircle,
  IconProgress,
} from '@tabler/icons-react';

import { type TimelineProps, TrackerOnlyState } from '../types';

const TrackerOnly = ({ continued, state }: TimelineProps) => {
  const { avatarProps, lineProps } = useMemo<{
    avatarProps: AvatarProps;
    lineProps: StackProps['sx'];
  }>(() => {
    switch (state) {
      case TrackerOnlyState.COMPLETE:
        return {
          avatarProps: {
            color: 'primary',
            Icon: IconCheck,
            sx: {
              borderColor: theme => theme.palette.new.border.neutral.brand,
              borderStyle: 'solid',
            },
          },
          lineProps: {
            backgroundColor: theme =>
              theme.palette.new.action.button.background.primary.default,
          },
        };
      case TrackerOnlyState.CURRENT:
        return {
          avatarProps: {
            color: 'white',
            Icon: IconProgress,
            sx: {
              borderColor: theme =>
                theme.palette.new.action.button.background.primary.default,
              borderStyle: 'solid',
              color: theme => theme.palette.new.icon.neutral.brand,
            },
          },
          lineProps: {
            backgroundColor: theme => theme.palette.new.border.neutral.default,
          },
        };
      case TrackerOnlyState.DISABLED:
        return {
          avatarProps: {
            color: 'default',
            Icon: IconDots,
            sx: {
              color: theme => theme.palette.new.icon.neutral.lighter,
            },
          },
          lineProps: {
            backgroundColor: theme => theme.palette.new.border.neutral.default,
          },
        };
      case TrackerOnlyState.ERROR:
        return {
          avatarProps: {
            color: 'error',
            Icon: IconExclamationCircle,
            sx: {
              color: theme => theme.palette.new.icon.feedback.error,
            },
          },
          lineProps: {
            backgroundColor: theme => theme.palette.new.border.neutral.default,
          },
        };
    }
  }, [state]);
  return (
    <Stack sx={{ alignItems: 'center' }}>
      <Avatar {...avatarProps} />
      {continued && (
        <Stack sx={{ width: 2, flex: 1, minHeight: 72, ...lineProps }} />
      )}
    </Stack>
  );
};

export default TrackerOnly;
