import { buttonClasses } from '@material-hu/mui/Button';
import { Theme } from '@material-hu/mui/styles';

// This is somewhat of duplicate of the "secondary" button variant, but with some overrides
// This could be added as an "error" variant in the future
export const markingClockSx = (isClockRunning: boolean) => ({
  borderColor: ({ palette }: Theme) =>
    isClockRunning ? palette.new.border.states.error : undefined,
  svg: {
    stroke: ({ palette }: Theme) =>
      isClockRunning ? palette.new.text.feedback.error : undefined,
  },
  '&:hover svg': {
    stroke: ({ palette }: Theme) =>
      isClockRunning ? palette.new.text.feedback.error : undefined,
  },
  '&:hover': {
    backgroundColor: ({ palette }: Theme) =>
      isClockRunning
        ? palette.new.background.feedback.error
        : palette.new.action.button.background.secondary.hover,
    borderColor: ({ palette }: Theme) =>
      isClockRunning
        ? palette.new.border.states.error
        : palette.new.border.neutral.brand,
  },
  [`&.${buttonClasses.focusVisible}`]: {
    backgroundColor: ({ palette }: Theme) =>
      isClockRunning
        ? palette.new.background.feedback.error
        : palette.new.action.button.background.secondary.hover,
  },
  [`&.${buttonClasses.disabled}`]: {
    color: ({ palette }: Theme) => palette.new.text.neutral.disabled,
    backgroundColor: ({ palette }: Theme) =>
      palette.new.background.elements.disabled,
    borderColor: ({ palette }: Theme) => palette.new.border.neutral.default,
  },
});