import React, {ReactNode} from 'react';
import {
  StyleProp,
  TextStyle,
  TouchableOpacity,
  TouchableOpacityProps,
  ViewStyle,
  View,
} from 'react-native';
import CheckboxChecked from '@assets/checkboxChecked.svg';
import CheckboxUnchecked from '@assets/checkboxUncheked.svg';
import RadioChecked from '@assets/radioChecked.svg';
import RadioUnchecked from '@assets/radioUnchecked.svg';
import Text, {TextVariant} from '@components/Text';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

export interface CheckboxProps {
  title?: string | ReactNode;
  checked?: boolean;
  color?: string;
  size?: number;
  radio?: boolean;
  disabled?: boolean;
  onPress?: TouchableOpacityProps['onPress'];
  containerStyle?: StyleProp<ViewStyle>;
  testID?: string;
  textVariant?: TextVariant;
  textStyle?: StyleProp<TextStyle>;
  textContainerStyle?: StyleProp<ViewStyle>;
  textColor?: string;
  changeDisabledColor?: boolean;
  subtitle?: string;
  subtitleStyle?: StyleProp<TextStyle>;
  subtitleVariant?: TextVariant;
  numberOfLines?: {
    title: number;
    subtitle: number;
  };
}

/**
 * @deprecated - Use `_HuGo/Checkbox` instead
 */
function Checkbox({
  title,
  checked,
  color,
  size = 24,
  radio,
  disabled,
  onPress,
  containerStyle,
  testID,
  textVariant,
  textStyle,
  textContainerStyle,
  textColor,
  changeDisabledColor = true,
  subtitle,
  subtitleStyle,
  subtitleVariant,
  numberOfLines,
}: CheckboxProps) {
  const changeColor = disabled && changeDisabledColor;
  const Component = radio
    ? checked
      ? RadioChecked
      : RadioUnchecked
    : checked
    ? CheckboxChecked
    : CheckboxUnchecked;
  const componentColor = changeColor
    ? COLORS.GRAY_THIRTY_THREE
    : color || COLORS.BLACK;

  return (
    <TouchableOpacity
      disabled={disabled}
      onPress={onPress}
      style={[styles.checkContainer, containerStyle]}>
      <Component
        testID={testID}
        stroke={componentColor}
        color={componentColor}
        width={size}
        height={size}
      />
      <View style={textContainerStyle}>
        {title && (
          <Text
            variant={textVariant || 'subtitle1'}
            numberOfLines={numberOfLines?.title}
            style={[styles.textStyle, textStyle]}
            color={changeColor ? COLORS.GRAY_THIRTY_THREE : textColor}>
            {title}
          </Text>
        )}
        {subtitle && (
          <Text
            variant={subtitleVariant || 'body1'}
            numberOfLines={numberOfLines?.subtitle}
            style={[styles.subtitleStyle, subtitleStyle]}
            color={changeColor ? COLORS.GRAY_THIRTY_THREE : textColor}>
            {subtitle}
          </Text>
        )}
      </View>
    </TouchableOpacity>
  );
}

export default Checkbox;