import { FormControl, FormHelperText } from '@mui/material'
import CheckboxMaterial from '@mui/material/Checkbox'
import FormControlLabel from '@mui/material/FormControlLabel'
import FormGroup from '@mui/material/FormGroup'
import { useTheme } from '@mui/styles'
import { FieldInputProps } from 'formik'
import React from 'react'

export interface ICheckboxField {
  label: string | number | JSX.Element;
  field?: FieldInputProps<any>;
}

interface IOtherProps {
  [key: string]: any;
}

export const Checkbox = ({
  label,
  field,
  selectOptions,
  theme,
  setFieldValue,
  disableDropdown,
  setPhoneValidationIsLoading,
  defaultCountry,
  required,
  uniqueId,
  dateFormat,
  datePlaceholder,
  isCountryCodeEditable,
  ...rest
}: ICheckboxField & IOtherProps) => {
  const customTheme: any = useTheme()
  return (
    <FormControl error={!!(rest?.form?.errors && rest.form.errors[field?.name ?? ''])}>
      <FormGroup>
        <FormControlLabel
          control={<CheckboxMaterial {...field} {...rest} />}
          label={label}
          componentsProps={{
            typography: customTheme?.checkbox,
          }}
        />
      </FormGroup>
      {rest?.form?.errors && rest.form.errors[field?.name ?? ''] ? (
        <FormHelperText>Required</FormHelperText>
      ) : null}
    </FormControl>
  )
}