import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import SwipeableListItem from './SwipeableListItemNew';
import {GLYPHS} from '../Glyphs';
import {useTheme} from '../../theme/ThemeContext';
import PlayyText from '../PlayyText/PlayyText';

/**
 * NEW DECLARATIVE API EXAMPLES
 * Demonstrates the modular, composable structure
 */

/**
 * Full declarative example with all new components
 */
export const FullDeclarativeExample = () => {
  const {colors} = useTheme();
  
  return (
    <SwipeableListItem
      onPress={() => console.log('Item pressed')}
      onLongPress={() => console.log('Long pressed')}>
      {/* Declarative swipe actions */}
      <SwipeableListItem.SwipeLeftActions>
        <SwipeableListItem.SwipeLeftAction
          backgroundColor={colors.colors_blue}
          width={80}
          onPress={() => console.log('Mark as read')}>
          <View style={styles.actionContent}>
            <PlayyText color={colors.white} BodyEmphasized>
              {GLYPHS['checkmark-message-fill'].char}
            </PlayyText>
            <PlayyText color={colors.white} FootnoteRegular>
              Read
            </PlayyText>
          </View>
        </SwipeableListItem.SwipeLeftAction>
        
        <SwipeableListItem.SwipeLeftAction
          backgroundColor={colors.gray_3}
          width={80}
          onPress={() => console.log('Pin')}>
          <View style={styles.actionContent}>
            <PlayyText color={colors.white} BodyEmphasized>
              {GLYPHS['pin-fill'].char}
            </PlayyText>
            <PlayyText color={colors.white} FootnoteRegular>
              Pin
            </PlayyText>
          </View>
        </SwipeableListItem.SwipeLeftAction>
      </SwipeableListItem.SwipeLeftActions>

      <SwipeableListItem.SwipeRightActions>
        <SwipeableListItem.SwipeRightAction
          backgroundColor={colors.red}
          width={80}
          onPress={() => console.log('Mute')}>
          <View style={styles.actionContent}>
            <PlayyText color={colors.white} BodyEmphasized>
              {GLYPHS['bell-slash-fill'].char}
            </PlayyText>
            <PlayyText color={colors.white} FootnoteRegular>
              Mute
            </PlayyText>
          </View>
        </SwipeableListItem.SwipeRightAction>
        
        <SwipeableListItem.SwipeRightAction
          backgroundColor={colors.colors_orange}
          width={80}
          onPress={() => console.log('Archive')}>
          <View style={styles.actionContent}>
            <PlayyText color={colors.white} BodyEmphasized>
              {GLYPHS['archive-fill'].char}
            </PlayyText>
            <PlayyText color={colors.white} FootnoteRegular>
              Archive
            </PlayyText>
          </View>
        </SwipeableListItem.SwipeRightAction>
      </SwipeableListItem.SwipeRightActions>

      {/* Main content */}
      <SwipeableListItem.Avatar
        source={{uri: 'https://via.placeholder.com/56'}}
        fallbackName="Emily"
      />

      <SwipeableListItem.Content>
        <SwipeableListItem.Title numberOfLines={1}>
          Emily
        </SwipeableListItem.Title>
        <SwipeableListItem.SubTitle numberOfLines={2}>
          This is a fully declarative example with composable components
        </SwipeableListItem.SubTitle>
      </SwipeableListItem.Content>

      <SwipeableListItem.Metadata timestamp="3:45 PM">
        <SwipeableListItem.Icon>
          <PlayyText>{GLYPHS['pin-fill'].char}</PlayyText>
        </SwipeableListItem.Icon>
        <SwipeableListItem.Icon>
          <View style={[styles.mentionBadge, {backgroundColor: colors.colors_blue}]}>
            <PlayyText CalloutRegular color={colors.colors_blue}>
              @
            </PlayyText>
          </View>
        </SwipeableListItem.Icon>
        <SwipeableListItem.Icon>
          <View style={[styles.unreadBadge, {backgroundColor: colors.colors_blue}]}>
            <PlayyText FootnoteRegular color={colors.primary_white}>
              5
            </PlayyText>
          </View>
        </SwipeableListItem.Icon>
      </SwipeableListItem.Metadata>
    </SwipeableListItem>
  );
};

/**
 * Simple declarative swipe actions
 */
export const SimpleDeclarativeSwipe = () => {
  const {colors} = useTheme();
  
  return (
    <SwipeableListItem onPress={() => console.log('Pressed')}>
      <SwipeableListItem.SwipeLeftActions>
        <SwipeableListItem.SwipeLeftAction
          backgroundColor="#007AFF"
          onPress={() => console.log('Action 1')}>
          <PlayyText color="white">✓</PlayyText>
        </SwipeableListItem.SwipeLeftAction>
      </SwipeableListItem.SwipeLeftActions>

      <SwipeableListItem.SwipeRightActions>
        <SwipeableListItem.SwipeRightAction
          backgroundColor="#FF3B30"
          onPress={() => console.log('Delete')}>
          <PlayyText color="white">🗑</PlayyText>
        </SwipeableListItem.SwipeRightAction>
      </SwipeableListItem.SwipeRightActions>

      <SwipeableListItem.Avatar source={{uri: 'https://via.placeholder.com/56'}} />
      <SwipeableListItem.Content>
        <SwipeableListItem.Title>John Doe</SwipeableListItem.Title>
        <SwipeableListItem.SubTitle>Simple example</SwipeableListItem.SubTitle>
      </SwipeableListItem.Content>
      <SwipeableListItem.Metadata timestamp="Now" />
    </SwipeableListItem>
  );
};

/**
 * Custom styled swipe actions with wide buttons
 */
export const WideSwipeActions = () => {
  const {colors} = useTheme();
  
  return (
    <SwipeableListItem onPress={() => console.log('Pressed')}>
      <SwipeableListItem.SwipeLeftActions>
        <SwipeableListItem.SwipeLeftAction
          backgroundColor="#34C759"
          width={120}
          onPress={() => console.log('Wide action')}>
          <View style={{gap: 8}}>
            <PlayyText color="white" Title3_Regular>✓</PlayyText>
            <PlayyText color="white" BodyEmphasized>Complete</PlayyText>
          </View>
        </SwipeableListItem.SwipeLeftAction>
      </SwipeableListItem.SwipeLeftActions>

      <SwipeableListItem.Avatar source={{uri: 'https://via.placeholder.com/56'}} />
      <SwipeableListItem.Content name="Task Item" message="Wide swipe actions" />
      <SwipeableListItem.Metadata timestamp="2:00 PM" />
    </SwipeableListItem>
  );
};

/**
 * Custom content with inline styles
 */
export const CustomContentExample = () => {
  const {colors} = useTheme();
  
  return (
    <SwipeableListItem onPress={() => console.log('Pressed')}>
      <SwipeableListItem.Avatar source={{uri: 'https://via.placeholder.com/56'}} />
      
      <SwipeableListItem.Content>
        <SwipeableListItem.Title style={{color: colors.colors_blue}}>
          Custom Styled Title
        </SwipeableListItem.Title>
        <SwipeableListItem.SubTitle numberOfLines={3} style={{fontStyle: 'italic'}}>
          This subtitle has custom styling and can wrap to 3 lines with italic font
        </SwipeableListItem.SubTitle>
      </SwipeableListItem.Content>
      
      <SwipeableListItem.Metadata timestamp="1:30 PM" />
    </SwipeableListItem>
  );
};

/**
 * Custom icons in metadata
 */
export const CustomMetadataIcons = () => {
  const {colors} = useTheme();
  
  return (
    <SwipeableListItem onPress={() => console.log('Pressed')}>
      <SwipeableListItem.Avatar source={{uri: 'https://via.placeholder.com/56'}} />
      <SwipeableListItem.Content name="User" message="Custom metadata icons" />
      
      <SwipeableListItem.Metadata timestamp="5:00 PM">
        {/* Custom icon components */}
        <SwipeableListItem.Icon>
          <View style={{backgroundColor: 'gold', padding: 4, borderRadius: 4}}>
            <Text>⭐</Text>
          </View>
        </SwipeableListItem.Icon>
        
        <SwipeableListItem.Icon>
          <View style={{backgroundColor: 'red', padding: 4, borderRadius: 12}}>
            <PlayyText FootnoteRegular color="white">99+</PlayyText>
          </View>
        </SwipeableListItem.Icon>
      </SwipeableListItem.Metadata>
    </SwipeableListItem>
  );
};

/**
 * Multiple swipe actions per side
 */
export const MultipleSwipeActions = () => {
  const {colors} = useTheme();
  
  return (
    <SwipeableListItem onPress={() => console.log('Pressed')}>
      <SwipeableListItem.SwipeLeftActions>
        <SwipeableListItem.SwipeLeftAction
          backgroundColor="#007AFF"
          width={70}
          onPress={() => console.log('Action 1')}>
          <PlayyText color="white">1️⃣</PlayyText>
        </SwipeableListItem.SwipeLeftAction>
        
        <SwipeableListItem.SwipeLeftAction
          backgroundColor="#5856D6"
          width={70}
          onPress={() => console.log('Action 2')}>
          <PlayyText color="white">2️⃣</PlayyText>
        </SwipeableListItem.SwipeLeftAction>
        
        <SwipeableListItem.SwipeLeftAction
          backgroundColor="#AF52DE"
          width={70}
          onPress={() => console.log('Action 3')}>
          <PlayyText color="white">3️⃣</PlayyText>
        </SwipeableListItem.SwipeLeftAction>
      </SwipeableListItem.SwipeLeftActions>

      <SwipeableListItem.SwipeRightActions>
        <SwipeableListItem.SwipeRightAction
          backgroundColor="#FF9500"
          width={70}
          onPress={() => console.log('Action A')}>
          <PlayyText color="white">🅰️</PlayyText>
        </SwipeableListItem.SwipeRightAction>
        
        <SwipeableListItem.SwipeRightAction
          backgroundColor="#FF3B30"
          width={70}
          onPress={() => console.log('Action B')}>
          <PlayyText color="white">🅱️</PlayyText>
        </SwipeableListItem.SwipeRightAction>
      </SwipeableListItem.SwipeRightActions>

      <SwipeableListItem.Avatar source={{uri: 'https://via.placeholder.com/56'}} />
      <SwipeableListItem.Content>
        <SwipeableListItem.Title>Multiple Actions</SwipeableListItem.Title>
        <SwipeableListItem.SubTitle>Swipe left or right</SwipeableListItem.SubTitle>
      </SwipeableListItem.Content>
      <SwipeableListItem.Metadata timestamp="Now" />
    </SwipeableListItem>
  );
};

/**
 * Mixing declarative and legacy APIs (backward compatible)
 */
export const MixedAPIExample = () => {
  const {colors} = useTheme();
  
  return (
    <SwipeableListItem onPress={() => console.log('Pressed')}>
      {/* Can still use legacy SwipeActions if needed */}
      <SwipeableListItem.SwipeActions
        readStatus="unread"
        onToggleReadStatus={() => console.log('Toggle read')}
        onArchive={() => console.log('Archive')}
      />
      
      {/* But use new composable content */}
      <SwipeableListItem.Avatar source={{uri: 'https://via.placeholder.com/56'}} />
      <SwipeableListItem.Content>
        <SwipeableListItem.Title>Mixed API</SwipeableListItem.Title>
        <SwipeableListItem.SubTitle>
          Using legacy SwipeActions with new Content components
        </SwipeableListItem.SubTitle>
      </SwipeableListItem.Content>
      <SwipeableListItem.Metadata timestamp="3:00 PM" unreadCount={2} />
    </SwipeableListItem>
  );
};

const styles = StyleSheet.create({
  actionContent: {
    alignItems: 'center',
    justifyContent: 'center',
    gap: 5,
  },
  mentionBadge: {
    width: 16,
    height: 15,
    justifyContent: 'center',
    alignItems: 'center',
  },
  unreadBadge: {
    paddingHorizontal: 6,
    height: 18,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
