import React from 'react';
import {View, StyleSheet} from 'react-native';
import PlayyText from '../PlayyText/PlayyText';
import {SwipeableListItemMetadataProps} from './types';
import {useTheme, ColorsScheme} from '../../theme/ThemeContext';
import {useSwipeableListItemContext} from './SwipeableListItemContext';
import {SwipeableListItemIcon} from './SwipeableListItemIcon';

/**
 * Metadata section of SwipeableListItem (timestamp + indicators)
 * Can use children for full customization or props for convenience
 * 
 * @example
 * ```tsx
 * // With children (composable)
 * <SwipeableListItem.Metadata timestamp="2:30 PM">
 *   <SwipeableListItem.Icon><Text>📌</Text></SwipeableListItem.Icon>
 *   <SwipeableListItem.Icon>
 *     <View style={{backgroundColor: 'blue', borderRadius: 10}}>
 *       <Text>5</Text>
 *     </View>
 *   </SwipeableListItem.Icon>
 * </SwipeableListItem.Metadata>
 * 
 * // With props (legacy convenience)
 * <SwipeableListItem.Metadata
 *   timestamp="2:30 PM"
 *   isPinned
 *   unreadCount={5}
 * />
 * ```
 */
export const SwipeableListItemMetadata: React.FC<SwipeableListItemMetadataProps> = ({
  children,
  timestamp,
  isPinned,
  pinnedIcon,
  isMentioned,
  unreadCount,
}) => {
  const {colors} = useTheme();
  const context = useSwipeableListItemContext();
  const styles = themedStyle(colors);

  // Use context unreadCount if not provided directly
  const finalUnreadCount = unreadCount ?? context.unreadCount;

  // Check if children contain Icon components
  const hasIconChildren = React.Children.toArray(children).some(child =>
    React.isValidElement(child) && child.type === SwipeableListItemIcon
  );

  return (
    <View style={styles.chatRightSection}>
      {/* Timestamp */}
      {timestamp && (
        <PlayyText FootnoteRegular color={colors.labels_secondary}>
          {timestamp}
        </PlayyText>
      )}

      {/* Indicators */}
      <View style={styles.chatRightIndicators}>
        {/* If using Icon children, render them */}
        {hasIconChildren && children}
        
        {/* Legacy prop-based indicators */}
        {!hasIconChildren && (
          <>
            {isPinned && <PlayyText>{pinnedIcon}</PlayyText>}
            {isMentioned && (
              <View style={styles.mentionBadge}>
                <PlayyText CalloutRegular color={colors.colors_blue}>
                  @
                </PlayyText>
              </View>
            )}
            {finalUnreadCount !== undefined && finalUnreadCount > 0 && (
              <View style={styles.unreadBadge}>
                <PlayyText FootnoteRegular color={colors.primary_white}>
                  {finalUnreadCount}
                </PlayyText>
              </View>
            )}
          </>
        )}
      </View>
    </View>
  );
};

const themedStyle = (colors: ColorsScheme) =>
  StyleSheet.create({
    chatRightSection: {
      alignItems: 'flex-end',
      justifyContent: 'flex-start',
      paddingTop: 2,
    },
    chatRightIndicators: {
      flexDirection: 'row',
      alignItems: 'flex-start',
      gap: 6,
      marginTop: 3,
    },
    mentionBadge: {
      width: 16,
      height: 15,
      justifyContent: 'center',
      alignItems: 'center',
    },
    unreadBadge: {
      backgroundColor: colors.colors_blue,
      paddingHorizontal: 6,
      height: 18,
      borderRadius: 10,
      justifyContent: 'center',
      alignItems: 'center',
    },
  });