import IconButton from '@material-hu/mui/IconButton';
import { styled } from '@material-hu/mui/styles';

export type CallButtonVariant = 'danger' | 'danger-secondary';

type ControlProps = {
  callButtonVariant?: CallButtonVariant;
};

// I had to create these custom variants because design team use dark mode for controls
// and in material-hu we don't have dark mode yet
const Control = styled(IconButton, {
  shouldForwardProp: prop => prop !== 'callButtonVariant',
})<ControlProps>(({ theme, callButtonVariant }) => {
  const defaultStyles = {
    color: theme.palette.new.text.neutral.inverted,
    backgroundColor: theme.palette.hugoBackground?.neutralBgTransparent, // design definition pending
    border: '1px solid transparent',
    '& svg, &:hover svg': {
      stroke: theme.palette.new.text.neutral.inverted,
    },
    '&:hover': {
      backgroundColor: theme.palette.graphics?.neutralGraphic, // design definition pending
      border: '1px solid transparent',
    },
    '&:disabled': {
      backgroundColor: theme.palette.new.background.elements.overlay,
      border: '1px solid transparent',
    },
    '&:disabled svg': {
      stroke: theme.palette.new.text.neutral.disabled,
    },
  };

  const variants = {
    danger: {
      ...defaultStyles,
      background: theme.palette.new.action.button.background.error.default,
      '&:hover': {
        background: theme.palette.new.action.button.background.error.hover,
        border: '1px solid transparent',
      },
      '&:disabled': {
        backgroundColor:
          theme.palette.new.action.button.background.error.disabled,
        border: '1px solid transparent',
      },
      '&:disabled svg': {
        stroke: theme.palette.new.text.neutral.inverted,
      },
    },
    'danger-secondary': {
      ...defaultStyles,
      color: theme.palette.new.text.feedback.error,
      background: theme.palette.new.background.feedback.error,
      border: `1px solid ${theme.palette.new.text.feedback.error}`,
      '& svg, &:hover svg': {
        stroke: theme.palette.new.text.feedback.error,
      },
      '&:hover': {
        background: theme.palette.new.border.states.error,
        border: `1px solid ${theme.palette.new.text.feedback.error}`,
      },
    },
  };

  return callButtonVariant ? variants[callButtonVariant] : defaultStyles;
});

export default Control;