import { View, ViewProps } from 'react-native';
import React from 'react';
import { LargeSelector, LargeSelectorProps } from './LargeSelector';
import { classNames } from '../utils';

export interface LargeSelectorGroupProps extends ViewProps {
  options: LargeSelectorProps[];
  selectedItem: LargeSelectorProps;
  onItemSelect?: (item: LargeSelectorProps) => void;
  onItemEdit?: (item: LargeSelectorProps) => void;
  className?: string;
}

export const LargeSelectorGroup: React.FC<LargeSelectorGroupProps> = ({
  options,
  selectedItem,
  onItemSelect,
  onItemEdit,
  className,
  ...restOfProps
}) => {
  const handleOnSelect = (item: LargeSelectorProps) => {
    onItemSelect(item);
  };

  const handleOnEdit = (item: LargeSelectorProps) => {
    onItemEdit(item);
  };

  return (
    <View className={classNames(className)} {...restOfProps}>
      {options?.map((item) => (
        <LargeSelector
          key={item?.id}
          id={item?.id}
          title={item?.title}
          description={item?.description}
          subtitle={item?.subtitle}
          additionalDescription={item?.additionalDescription}
          editable={item?.editable}
          isSelected={selectedItem?.id === item.id}
          onSelect={() => handleOnSelect(item)}
          onEdit={() => handleOnEdit(item)}
          accessoryLeft={item.accessoryLeft}
        />
      ))}
    </View>
  );
};