import { type FC } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import { moderateScale } from 'react-native-size-matters';
import IconSVG from '../../assets/svgs';
import Typography from '../../components/TTypography/TTypography';
import { defaultScale } from '../../utils/Common';
import { TypographyVariant } from '../../components/TTypography/TTypographyEnum';

interface CheckBoxProps {
  label?: string;
  checked: boolean;
  onPress?: () => void;
  disable?: boolean;
  containerStyle?: object;
  fontWeight?: any;
}

const TCheckBox: FC<CheckBoxProps> = ({
  label,
  checked,
  onPress,
  disable = false,
  containerStyle,
  fontWeight,
}): any => {
  const stylesWithProp = styles({ disable });
  return (
    <View>
      <TouchableOpacity
        onPress={disable ? () => { } : onPress}
        activeOpacity={1}
      >
        <View
          style={{
            ...stylesWithProp.container,
            ...containerStyle,
          }}
        >
          {checked ? (
            <IconSVG name="checkboxfilled" />
          ) : (
            <IconSVG name="checkboxempty" />
          )}
          <Typography
            children={label}
            variant={TypographyVariant.PRIMARY}
            style={{ ...stylesWithProp.checkboxLabel, fontWeight }}
          />
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default TCheckBox;

const styles = (props: { disable: boolean }) =>
  StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      marginTop: 5,
      marginBottom: 5,
      opacity: props.disable ? 0.5 : 1,
    },
    checkboxLabel: {
      fontSize: moderateScale(16, defaultScale),
      marginHorizontal: moderateScale(5, defaultScale),
    },
  });