import {useMemo} from 'react';
import {IconChevronDown} from '@tabler/icons-react-native';
import {Button, ButtonProps} from '@components';
import {
  getStateName,
  getTranslatedStateName,
} from '@modules/serviceManagement/utils';
import {ServiceManagementTaskStateName} from '@modules/serviceManagement/interfaces';
import {useTheme} from '@shared/theme';

interface Props extends Omit<ButtonProps, 'text'> {
  state: string;
}

export default function SemanticButton({state, ...props}: Props) {
  const {theme} = useTheme();
  const translatedStateName = getTranslatedStateName(state);

  const colors = useMemo(
    () =>
      ({
        [ServiceManagementTaskStateName.InProgress]: {
          enabled: theme.graphics.info[600],
          disabled: theme.graphics.info[600],
          underlayColor: theme.text.feedback.info,
        },
        [ServiceManagementTaskStateName.OnHold]: {
          enabled: theme.graphics.warning[600],
          disabled: theme.graphics.warning[600],
          underlayColor: theme.text.feedback.warning,
        },
        [ServiceManagementTaskStateName.Assigned]: {
          enabled: theme.graphics.purple[600],
          disabled: theme.graphics.purple[500],
          underlayColor: theme.graphics.purple[500],
        },
      }[(getStateName(state) || '') as string] || {
        enabled: theme.icon.neutral.brand,
        disabled: theme.text.neutral.brand,
      }),
    [theme, state],
  );

  return (
    <Button
      size="sm"
      style={{
        backgroundColor: props.isLoading ? colors.disabled : colors.enabled,
        underlayColor: colors.underlayColor,
      }}
      text={translatedStateName}
      IconRight={IconChevronDown}
      {...props}
    />
  );
}