const useStyles = makeStyles({
  labelUnchecked: {
    color: tokens.colorPaletteRedForeground1,
  },
  labelChecked: {
    color: tokens.colorPaletteGreenForeground1,
  },
  indicatorUnchecked: {
    backgroundColor: tokens.colorPaletteRedBackground1,
    ...shorthands.borderColor(tokens.colorPaletteRedBorder1),
  },
  indicatorChecked: {
    color: tokens.colorPaletteGreenForeground1,
    backgroundColor: tokens.colorPaletteGreenBackground1,
    ...shorthands.borderColor(tokens.colorPaletteGreenBorder1),
  },
});

export const ColorfulCheckbox = (props: CheckboxProps) => {
  const [checked, setChecked] = useControllableState({
    defaultState: props.defaultChecked,
    state: props.checked,
    initialState: false,
  });

  const styles = useStyles();

  return (
    <Checkbox
      checked={checked}
      onChange={(_ev, data) => setChecked(data.checked)}
      label={resolveShorthand(props.label, {
        required: true,
        defaultProps: { className: mergeClasses(checked ? styles.labelChecked : styles.labelUnchecked) },
      })}
      indicator={resolveShorthand(props.indicator, {
        required: true,
        defaultProps: { className: mergeClasses(checked ? styles.indicatorChecked : styles.indicatorUnchecked) },
      })}
    />
  );
};