import React from 'react';
import {View, StyleSheet, TouchableOpacity} from 'react-native';
import PlayyText from '../PlayyText/PlayyText';
import {SwipeableListItemSwipeActionsProps, SwipeAction} from './types';
import {useTheme, ColorsScheme} from '../../theme/ThemeContext';
import {GLYPHS} from '../Glyphs';

/**
 * Swipe actions configuration for SwipeableListItem
 * This component doesn't render anything visible, but configures swipe behavior
 * 
 * @example
 * ```tsx
 * <SwipeableListItem.SwipeActions
 *   readStatus="unread"
 *   showPinAction
 *   onToggleReadStatus={() => {}}
 *   onMute={() => {}}
 *   onArchive={() => {}}
 * />
 * ```
 */
export const SwipeableListItemSwipeActions: React.FC<SwipeableListItemSwipeActionsProps> = () => {
  // This component is used for configuration only, doesn't render
  return null;
};

/**
 * Build left swipe actions based on configuration
 */
export const buildLeftSwipeActions = (
  config: SwipeableListItemSwipeActionsProps | undefined,
  colors: ColorsScheme
): SwipeAction[] => {
  if (!config) return [];
  
  const actions: SwipeAction[] = [];

  // Custom left actions take precedence
  if (config.leftActions && config.leftActions.length > 0) {
    return config.leftActions;
  }

  // Read/Unread action
  if (config.readStatus) {
    actions.push({
      comp: (
        <View style={styles.leftSwipeActionButton}>
          <PlayyText color={colors.white} BodyEmphasized>
            {GLYPHS['checkmark-message-fill'].char}
          </PlayyText>
          <PlayyText color={colors.white} FootnoteRegular>
            {config.readStatus === 'unread' ? 'Unread' : 'Read'}
          </PlayyText>
        </View>
      ),
      color: config.leftActionColors?.read ?? colors.colors_blue,
      width: 64,
      onPress: config.onToggleReadStatus,
    });
  }

  // Pin action
  if (config.showPinAction) {
    actions.push({
      comp: (
        <View style={styles.leftSwipeActionButton}>
          <PlayyText color={colors.white} BodyEmphasized>
            {GLYPHS['pin-fill'].char}
          </PlayyText>
          <PlayyText color={colors.white} BodyEmphasized>
            Pin
          </PlayyText>
        </View>
      ),
      color: config.leftActionColors?.pin ?? colors.gray_3,
      width: 64,
      onPress: config.onTogglePin,
    });
  }

  return actions;
};

/**
 * Build right swipe actions based on configuration
 */
export const buildRightSwipeActions = (
  config: SwipeableListItemSwipeActionsProps | undefined,
  colors: ColorsScheme
): SwipeAction[] => {
  if (!config) return [];
  
  const actions: SwipeAction[] = [];

  // Custom right actions take precedence
  if (config.rightActions && config.rightActions.length > 0) {
    return config.rightActions;
  }

  // Mute action
  if (config.onMute) {
    actions.push({
      comp: (
        <View style={styles.leftSwipeActionButton}>
          <PlayyText color={colors.white} BodyEmphasized>
            {GLYPHS['bell-slash-fill'].char}
          </PlayyText>
          <PlayyText color={colors.white} FootnoteRegular>
            Mute
          </PlayyText>
        </View>
      ),
      color: config.rightActionColors?.mute ?? colors.red,
      width: 64,
      onPress: config.onMute,
    });
  }

  // Archive action
  if (config.onArchive) {
    actions.push({
      comp: (
        <View style={styles.leftSwipeActionButton}>
          <PlayyText BodyEmphasized color={colors.white}>
            {GLYPHS['archive-fill'].char}
          </PlayyText>
          <PlayyText FootnoteRegular color={colors.white}>
            Archive
          </PlayyText>
        </View>
      ),
      color: config.rightActionColors?.archive ?? colors.colors_orange,
      width: 64,
      onPress: config.onArchive,
    });
  }

  // More action
  if (config.onMore) {
    actions.push({
      comp: (
        <View style={styles.leftSwipeActionButton}>
          <PlayyText BodyEmphasized color={colors.white}>
            {GLYPHS['menu-vertical'].char}
          </PlayyText>
          <PlayyText FootnoteRegular color={colors.white}>
            More
          </PlayyText>
        </View>
      ),
      color: config.rightActionColors?.more ?? colors.gray_3,
      width: 64,
      onPress: config.onMore,
    });
  }

  return actions;
};

const styles = StyleSheet.create({
  leftSwipeActionButton: {
    height: '100%',
    width: 64,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 5,
  },
});