import { observer } from 'mobx-react';
import React from 'react';
import { InputWrapper } from './input/InputWrapper';
import { InputProps } from './input/input.interface';
import { ApphouseComponent } from './component.interfaces';
import { InputComponentStyles } from './input/input.styles.interface';
import { Checkbox, omit } from '..';
import { InputStyles } from '../styles/defaults/themes.interface';
import { CheckboxStyles } from './checkbox/Checkbox';

export interface InputCheckboxStyles {
  input?: InputComponentStyles;
  checkbox?: CheckboxStyles;
}
export interface InputCheckboxProps
  extends Omit<
      InputProps,
      'styleOverwrites' | 'onChange' | 'size' | 'value' | 'variant' | 'value'
    >,
    ApphouseComponent<InputCheckboxStyles> {
  variant?: keyof InputStyles;
  /**
   * If the checkbox is checked
   */
  checked?: boolean;
  /**
   * The value of the checkbox
   */
  onChange?: (checked: boolean) => void;
}
/**
 * A wrapper on the select component that adds label and description
 */
export const InputCheckbox: React.FC<InputCheckboxProps> = observer(
  (props: InputCheckboxProps) => {
    const {
      id,
      label,
      onChange,
      checked,
      variant = 'm',
      styleOverwrites,
      ...rest
    } = props;

    return (
      <InputWrapper
        id={id}
        variant={variant}
        label={label}
        styleOverwrites={styleOverwrites?.input}
        {...omit(rest, ['variant'])}
        data-xray="InputCheckbox"
      >
        <Checkbox
          id={id}
          value={checked}
          label={label}
          onChange={(value) => onChange && onChange(value)}
        />
      </InputWrapper>
    );
  }
);