import { IconCheck } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { alpha, type Theme, useTheme } from '@material-hu/mui/styles';
import ToggleButton from '@material-hu/mui/ToggleButton';

import HuTooltip from '@material-hu/components/design-system/Tooltip';

import { type SegmentedToggleOption } from './SegmentedToggle';

type SegmentedToggleItemProps<T extends string | number> = {
  option: SegmentedToggleOption<T>;
  isSelected: boolean;
  activeColor?: string;
  showCheckWhenSelected?: boolean;
};

function getBackgroundColor<T extends string | number>(
  isSelected: boolean,
  option: SegmentedToggleOption<T>,
  activeColor: string | undefined,
  theme: Theme,
): string {
  const bgColor = option.color ?? activeColor;
  if (isSelected) {
    return option.color
      ? `${bgColor} !important`
      : `${theme.palette.new.action.background.brand.selected} !important`;
  }
  if (option.color) {
    return alpha(theme.palette.common.black, 0.08);
  }
  return `${theme.palette.new.action.background.brand.default} !important`;
}

function getTextColor<T extends string | number>(
  isSelected: boolean,
  option: SegmentedToggleOption<T>,
  theme: Theme,
): string {
  if (isSelected) {
    return option.color
      ? 'white !important'
      : `${theme.palette.new.text.neutral.brand} !important`;
  }
  if (option.color) {
    return 'inherit';
  }
  return `${theme.palette.new.text.neutral.brand} !important`;
}

const SegmentedToggleItem = <T extends string | number>({
  option,
  isSelected,
  activeColor,
  showCheckWhenSelected = false,
}: SegmentedToggleItemProps<T>) => {
  const theme = useTheme();
  const bgColor = option.color ?? activeColor;
  const showCheck = showCheckWhenSelected && isSelected;

  const button = (
    <ToggleButton
      value={option.value}
      sx={{
        backgroundColor: getBackgroundColor(
          isSelected,
          option,
          activeColor,
          theme,
        ),
        border: option.color ? '0px' : '1px solid !important',
        borderColor: option.color
          ? bgColor
          : `${theme.palette.new.border.neutral.brand} !important`,
        borderRadius: option.color ? '16px !important' : '8px !important',
        color: getTextColor(isSelected, option, theme),
        fontSize: '14px',
        fontWeight: 600,
        p: option.color ? '7px 12px' : '8px 12px',
        mr: 2,
        textTransform: 'none',
        '&:not(.Mui-selected):hover': option.color
          ? { backgroundColor: alpha(theme.palette.common.black, 0.12) }
          : {
              backgroundColor: `${theme.palette.new.action.background.brand.hover} !important`,
            },
      }}
    >
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}>
        {showCheck && <IconCheck size={16} />}
        {option.label}
      </Stack>
    </ToggleButton>
  );

  if (option.tooltip) {
    return <HuTooltip title={option.tooltip}>{button}</HuTooltip>;
  }

  return button;
};

export default SegmentedToggleItem;