import React from 'react';
import { type StyleProp, type ViewStyle } from 'react-native';
import {
  StyledCheckbox,
  StyledCheckboxContainer,
  StyledCheckMark,
  StyledDescription,
  StyledWrapper,
} from './StyledInlineCheckBox';
import { getThemeState } from './utils';

export interface InlineCheckboxProps {
  /**
   * Control whether the checkbox is checked
   */
  checked?: boolean;
  /**
   * Checkbox's description.
   */
  description?: string;
  /**
   * Whether the checkbox is disabled
   */
  disabled?: boolean;
  /**
   * Event handler.
   */
  onPress?: () => void;
  /**
   * Additional style.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Testing id of the component.
   */
  testID?: string;
  /**
   * Readonly of the checkbox.
   */
  readonly?: boolean;

  /**
   * Size of the checkbox. Can be 'medium' or 'large'.
   */
  size?: 'medium' | 'large';
}

const InlineCheckbox = ({
  checked = false,
  description,
  disabled = false,
  onPress,
  style,
  testID,
  readonly = false,
  size = 'medium',
}: InlineCheckboxProps) => {
  const themeState = getThemeState({ disabled, readonly, checked });
  return (
    <StyledWrapper
      onPress={onPress}
      disabled={disabled || readonly}
      themeState={themeState}
      style={style}
      testID={testID}
      accessibilityRole="checkbox"
      accessibilityState={{
        checked,
        disabled: disabled || readonly,
      }}
      accessibilityLabel={description}
    >
      <StyledCheckboxContainer themeSize={size}>
        {checked && (
          <StyledCheckMark
            themeIntent="primary"
            name="box-check"
            testID="check-mark"
            themeState={themeState}
            themeSize={size}
          />
        )}
        <StyledCheckbox themeState={themeState} themeSize={size} />
      </StyledCheckboxContainer>
      {!!description && (
        <StyledDescription
          intent={disabled ? 'subdued' : 'body'}
          variant={size === 'large' ? 'regular' : 'small'}
        >
          {description}
        </StyledDescription>
      )}
    </StyledWrapper>
  );
};

export default InlineCheckbox;
