import React from 'react';
import {View, StyleSheet} from 'react-native';
import PlayyText from '../PlayyText/PlayyText';
import {SwipeableListItemContentProps} from './types';
import {useTheme, ColorsScheme} from '../../theme/ThemeContext';
import {GLYPHS} from '../Glyphs';
import {SwipeableListItemTitle} from './SwipeableListItemTitle';
import {SwipeableListItemSubTitle} from './SwipeableListItemSubTitle';

/**
 * Content section of SwipeableListItem (name + message preview)
 * Can use children for full customization or props for convenience
 * 
 * @example
 * ```tsx
 * // With children (composable)
 * <SwipeableListItem.Content>
 *   <SwipeableListItem.Title>John Doe</SwipeableListItem.Title>
 *   <SwipeableListItem.SubTitle>Hey, how are you?</SwipeableListItem.SubTitle>
 * </SwipeableListItem.Content>
 * 
 * // With props (legacy convenience)
 * <SwipeableListItem.Content
 *   name="John Doe"
 *   message="Hey, how are you?"
 *   messageIcon={GLYPHS.checkmark.char}
 * />
 * ```
 */
export const SwipeableListItemContent: React.FC<SwipeableListItemContentProps> = ({
  children,
  name,
  message,
  messageIcon,
  messageIconColor,
  isTyping,
  isDeleted,
}) => {
  const {colors} = useTheme();
  const styles = themedStyle(colors);

  // If custom children provided with Title/SubTitle components, use that
  if (children) {
    const hasComposableChildren = React.Children.toArray(children).some(child =>
      React.isValidElement(child) && (
        child.type === SwipeableListItemTitle ||
        child.type === SwipeableListItemSubTitle
      )
    );
    
    if (hasComposableChildren) {
      return <View style={styles.chatContent}>{children}</View>;
    }
    
    // Otherwise treat as legacy custom content
    return <View style={styles.chatContent}>{children}</View>;
  }

  // Legacy prop-based rendering
  return (
    <View style={styles.chatContent}>
      {/* Name */}
      {name && (
        <PlayyText
          BodyEmphasized
          numberOfLines={1}
          style={styles.chatName}
          color={colors.labels_primary}>
          {name}
        </PlayyText>
      )}

      {/* Message preview */}
      <View style={styles.messagePreviewContainer}>
        {isDeleted ? (
          <View style={[styles.messageWithIconContainer, {alignItems: 'center'}]}>
            <PlayyText style={styles.messageIconText} Caption1Emphasized>
              {GLYPHS.nosign.char}
            </PlayyText>
            <PlayyText
              SubheadItalic
              numberOfLines={1}
              style={styles.messageText}
              color={colors.figure_secondary}>
              This message was deleted.
            </PlayyText>
          </View>
        ) : isTyping ? (
          <PlayyText
            SubheadItalic
            numberOfLines={1}
            color={colors.labels_secondary}>
            {name?.split(' ')[0]} is typing...
          </PlayyText>
        ) : (
          <View style={styles.messageWithIconContainer}>
            {messageIcon && (
              <PlayyText
                color={messageIconColor ?? colors.figure_secondary}
                SubheadEmphasized
                style={styles.messageIconText}>
                {messageIcon}
              </PlayyText>
            )}
            <PlayyText
              SubheadRegular
              numberOfLines={2}
              style={styles.messageText}
              color={colors.figure_secondary}>
              {message || ''}
            </PlayyText>
          </View>
        )}
      </View>
    </View>
  );
};

const themedStyle = (colors: ColorsScheme) =>
  StyleSheet.create({
    chatContent: {
      flex: 1,
      justifyContent: 'center',
      marginRight: 8,
    },
    chatName: {
      marginBottom: 2,
    },
    messagePreviewContainer: {
      flex: 1,
    },
    messageWithIconContainer: {
      flexDirection: 'row',
      alignItems: 'flex-start',
    },
    messageIconText: {
      marginRight: 2,
    },
    messageText: {
      flex: 1,
    },
  });