import React from 'react';
import {TouchableOpacity, View, StyleSheet} from 'react-native';
import IconComponent from '../Icon/IconComponent';
import {icons} from '../Icon/Icons';
import {useSwipeableListItemContext} from './SwipeableListItemContext';
import {SwipeableListItemSelected} from './SwipeableListItemSelected';
import {SwipeableListItemUnselected} from './SwipeableListItemUnselected';

interface SwipeableListItemSelectionProps {
  children?: React.ReactNode;
}

/**
 * Selection component for SwipeableListItem
 * Supports custom Selected/Unselected states or renders default checkbox
 * Only renders when in selection mode
 * 
 * @example
 * ```tsx
 * // Default checkbox
 * <SwipeableListItem isSelection selected={false} onSelectChange={handleSelect}>
 *   <SwipeableListItem.Selection />
 * </SwipeableListItem>
 * 
 * // Custom selected/unselected UI
 * <SwipeableListItem isSelection selected={false} onSelectChange={handleSelect}>
 *   <SwipeableListItem.Selection>
 *     <SwipeableListItem.Selected>
 *       <Icon name="checkmark-circle-fill" color="blue" size={24} />
 *     </SwipeableListItem.Selected>
 *     <SwipeableListItem.Unselected>
 *       <Icon name="circle" color="gray" size={24} />
 *     </SwipeableListItem.Unselected>
 *   </SwipeableListItem.Selection>
 * </SwipeableListItem>
 * ```
 */
export const SwipeableListItemSelection: React.FC<SwipeableListItemSelectionProps> = ({children}) => {
  const context = useSwipeableListItemContext();

  // Don't render if not in selection mode
  if (!context.isSelection) {
    return null;
  }

  // Extract Selected and Unselected components from children
  let selectedContent: React.ReactNode = null;
  let unselectedContent: React.ReactNode = null;

  if (children) {
    React.Children.forEach(children, child => {
      if (!React.isValidElement(child)) return;
      
      const childProps = child.props as any;
      
      if (child.type === SwipeableListItemSelected) {
        selectedContent = childProps.children;
      } else if (child.type === SwipeableListItemUnselected) {
        unselectedContent = childProps.children;
      }
    });
  }

  // If custom content is provided, use it
  if (selectedContent || unselectedContent) {
    return (
      <TouchableOpacity
        onPress={() => context.onSelectChange?.(!context.selected)}
        style={styles.customContainer}
        accessibilityRole="button"
        accessibilityLabel={context.selected ? 'Deselect item' : 'Select item'}
        hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}>
        {context.selected ? selectedContent : unselectedContent}
      </TouchableOpacity>
    );
  }

  // Otherwise render default icon checkbox
  return (
    <TouchableOpacity
      onPress={() => context.onSelectChange?.(!context.selected)}
      accessibilityRole="button"
      accessibilityLabel={context.selected ? 'Deselect item' : 'Select item'}
      hitSlop={{top: 8, bottom: 8, left: 8, right: 8}}
      style={styles.container}>
      <IconComponent
        size={22}
        name={context.selected ? icons.selected : icons.unselected}
      />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 56,
    justifyContent: 'center',
    marginRight: 12.66,
  },
  customContainer: {
    paddingRight: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },
});