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

export interface DefaultCheckboxProps {
  /**
   * Control whether the switch is checked
   */
  checked?: boolean;
  /**
   * Checkbox's description.
   */
  description?: string;
  /**
   * @deprecated `withBorder` prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.
   *
   * Whether the border is shown.
   */
  withBorder?: boolean;
  /**
   * Whether the switch 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;
}

const DefaultCheckbox = ({
  checked,
  description,
  withBorder = false,
  disabled = false,
  onPress,
  style,
  testID,
  readonly = false,
}: DefaultCheckboxProps) => {
  useDeprecation(
    `Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.`,
    withBorder === true
  );

  const themeState = getThemeState({ disabled, readonly, checked });

  return (
    <StyledWrapper
      onPress={onPress}
      disabled={disabled || readonly}
      themeState={themeState}
      style={style}
      testID={testID}
    >
      {!!description && (
        <StyledDescription
          intent={disabled ? 'subdued' : 'body'}
          variant="small"
        >
          {description}
        </StyledDescription>
      )}
      <StyledCheckboxContainer>
        {checked && (
          <StyledCheckMark
            icon="box-check"
            testID="check-mark"
            themeState={themeState}
          />
        )}
        <StyledCheckbox themeState={themeState} />
      </StyledCheckboxContainer>
    </StyledWrapper>
  );
};

export default DefaultCheckbox;