import React from 'react';
import { StyleSheet } from 'react-native';
import { Option } from './interface';
import createStyles from './styles/FlatSelect.style';
import Checkbox from '../Checkbox';

type StylesType = ReturnType<typeof createStyles>;

const CheckboxItem = React.memo(
  ({
    item,
    multiple,
    currentVal,
    testID,
    searchValue,
    itemFullContainer,
    styles,
    onDisabledPress,
    onChangeFn,
    rowHeight,
  }: {
    item: Option;
    multiple: boolean;
    currentVal: string | string[] | undefined;
    testID: string;
    searchValue: string;
    itemFullContainer: boolean;
    styles: StylesType;
    onDisabledPress?: (option: Option) => void;
    onChangeFn: (values: string | string[]) => void;
    rowHeight: number;
  }) => {
    const isSelected = multiple
      ? Array.isArray(currentVal) && currentVal.includes(item.value)
      : currentVal === item.value;

    const onItemChange = (_value: string | null) => {
      if (item?.disabled) {
        onDisabledPress?.(item);
        return;
      }
      if (multiple) {
        const oldVals = Array.isArray(currentVal) ? currentVal : [];
        const newVals =
          _value === item.value
            ? [item.value, ...oldVals.filter((v) => v !== item.value)]
            : oldVals.filter((v) => v !== item.value);
        onChangeFn(newVals);
      } else {
        const newVal = _value === item.value ? item.value : undefined;
        onChangeFn(newVal as string);
      }
    };

    return (
      <Checkbox
        testID={`${testID}${item.value}`}
        highlight={searchValue}
        prefixIcon={item.prefixIcon}
        multiple={multiple}
        labelPosition={item.labelPosition}
        key={`${item.value}`}
        activeValue={item.value}
        inactiveValue={null}
        value={isSelected ? item.value : null}
        label={item.label}
        labelTextStyle={item.labelTextStyle}
        labelProps={{
          numberOfLines: item.subLabel ? 1 : 2,
          ellipsizeMode: 'tail',
        }}
        subLabel={item.subLabel}
        subLabelTextStyle={item.subLabelTextStyle}
        subLabelProps={{
          numberOfLines: 2,
          ellipsizeMode: 'tail',
        }}
        contentLabel={item.contentLabel}
        contentLabelTextStyle={item.contentLabelTextStyle}
        disabled={item.disabled}
        style={StyleSheet.flatten([
          styles.checkboxContainer,
          itemFullContainer ? styles.itemFullContainer : null,
          { height: rowHeight },
        ])}
        onChange={onItemChange}
        onDisabledPress={() => onDisabledPress?.(item)}
      />
    );
  }
);

export default CheckboxItem;