import {
  View,
  TouchableOpacity,
  type StyleProp,
  type ViewStyle,
} from 'react-native';
import React, { type FC, useState } from 'react';
import TRadioButton from '../TRadioButton/TRadioButton';

interface RadioData {
  id: number;
  value: string;
  disable?: boolean;
}

interface Props {
  data: RadioData[];
  onSelectValue: (radio: RadioData) => void;
  selectedRadio?: (props: { size: number }) => React.ReactNode;
  unselectedRadio?: (props: { size: number }) => React.ReactNode;
  boxStyle?: StyleProp<ViewStyle>;
  selectedIconColor?: string;
  unselectedIconColor?: string;
  containerStyle?: StyleProp<ViewStyle>;
  defaultSelected?: RadioData;
  disable?: boolean;
}

const TRadioButtonGroup: FC<Props> = ({
  data,
  onSelectValue,
  selectedRadio,
  unselectedRadio,
  boxStyle,
  selectedIconColor,
  unselectedIconColor,
  containerStyle,
  defaultSelected,
  disable,
}): any => {
  const [selectedItem, setSelectedItem] = useState(
    defaultSelected || { id: -1 }
  );

  const selectHandler = (item: any) => {
    if (item.disable) {
      return;
    }
    setSelectedItem(item);
    onSelectValue(item);
  };

  return (
    <View style={containerStyle}>
      {data.map((item, index) => {
        return (
          <TouchableOpacity
            key={index}
            onPress={() => selectHandler(item)}
            activeOpacity={1}
            disabled={disable}
          >
            <TRadioButton
              label={item.value}
              selected={selectedItem.id === item.id}
              disable={item.disable}
              selectedRadio={selectedRadio}
              unselectedRadio={unselectedRadio}
              selectedIconColor={selectedIconColor}
              unselectedIconColor={unselectedIconColor}
              boxStyle={boxStyle}
            />
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

export default TRadioButtonGroup;