import { LabeledInput } from '@/components/ra-inputs/LabeledInput';
import { useTheme } from '@emotion/react';
import { styled } from '@mui/material/styles';
import { BooleanInputProps, BooleanInput as RaBooleanInput } from 'react-admin';

const StyledBooleanInput = styled(RaBooleanInput, { slot: 'Root' })(() => ({
  marginTop: '0 !important'
}));

function BooleanInput({ ...props }: BooleanInputProps): JSX.Element {
  const theme = useTheme();
  return (
    // @ts-ignore
    <LabeledInput {...props}>
      {/** @ts-ignore */}
      <StyledBooleanInput
        sx={{
          '& .MuiFormControlLabel-root': {
            marginLeft: '0 !important',
            marginRight: '0 !important'
          },
          '& .MuiSwitch-root': {
            margin: '0 !important',
            marginRight: `6px !important`,
            // @ts-ignore
            marginTop: props.display === 'legend' ? 0 : `${theme.spacing(1)} !important`
          }
        }}
      />
    </LabeledInput>
  );
}

export { BooleanInput };
export type { BooleanInputProps };