import React from 'react';
import SwipeableListItem from './SwipeableListItem';
import {GLYPHS} from '../Glyphs';
import {View} from 'react-native';
import {Text} from 'react-native-svg';

/**
 * Basic chat list item with avatar, name, message, and timestamp
 */
export const BasicChatItem = () => (
  <SwipeableListItem onPress={() => console.log('Item pressed')}>
    <SwipeableListItem.Avatar
      source={{uri: 'https://via.placeholder.com/56'}}
      fallbackName="John Doe"
    />
    <SwipeableListItem.Content name="John Doe" message="Hey, how are you?" />
    <SwipeableListItem.Metadata timestamp="2:30 PM" />
  </SwipeableListItem>
);

/**
 * Chat item with unread count and swipe actions
 */
export const UnreadChatItem = () => (
  <SwipeableListItem
    onPress={() => console.log('Item pressed')}
    backgroundColor="#F0F8FF">
    <SwipeableListItem.SwipeActions
      readStatus="unread"
      showPinAction
      onToggleReadStatus={() => console.log('Toggle read')}
      onTogglePin={() => console.log('Toggle pin')}
      onMute={() => console.log('Mute')}
      onArchive={() => console.log('Archive')}
    />
    <SwipeableListItem.Avatar
      source={{uri: 'https://via.placeholder.com/56'}}
      fallbackName="Jane Smith"
    />
    <SwipeableListItem.Content
      name="Jane Smith"
      message="Don't forget about the meeting tomorrow"
    />
    <SwipeableListItem.Metadata timestamp="Yesterday" unreadCount={3} />
  </SwipeableListItem>
);

/**
 * Chat item with pinned indicator
 */
export const PinnedChatItem = () => (
  <SwipeableListItem onPress={() => console.log('Item pressed')}>
    <SwipeableListItem.SwipeActions
      readStatus="read"
      showPinAction
      onToggleReadStatus={() => console.log('Toggle read')}
      onTogglePin={() => console.log('Toggle pin')}
    />
    <SwipeableListItem.Avatar
      source={{uri: 'https://via.placeholder.com/56'}}
      fallbackName="Team Chat"
    />
    <SwipeableListItem.Content
      name="Team Chat"
      message="Great work everyone!"
    />
    <SwipeableListItem.Metadata
      timestamp="1:15 PM"
      isPinned
      pinnedIcon={GLYPHS['pin-fill'].char}
    />
  </SwipeableListItem>
);

/**
 * Chat item with mention badge
 */
export const MentionedChatItem = () => (
  <SwipeableListItem
    onPress={() => console.log('Item pressed')}
    backgroundColor="#F0F8FF">
    <SwipeableListItem.Avatar
      source={{uri: 'https://via.placeholder.com/56'}}
      fallbackName="Development Team"
    />
    <SwipeableListItem.Content
      name="Development Team"
      message="@you: Can you review this PR?"
    />
    <SwipeableListItem.Metadata
      timestamp="10:45 AM"
      isMentioned
      unreadCount={1}
    />
  </SwipeableListItem>
);

/**
 * Chat item showing typing indicator
 */
export const TypingChatItem = () => (
  <SwipeableListItem onPress={() => console.log('Item pressed')}>
    <SwipeableListItem.Avatar
      source={{uri: 'https://via.placeholder.com/56'}}
      fallbackName="Alice"
    />
    <SwipeableListItem.Content name="Alice" isTyping />
    <SwipeableListItem.Metadata timestamp="Now" />
  </SwipeableListItem>
);

/**
 * Chat item with deleted message
 */
export const DeletedMessageItem = () => (
  <SwipeableListItem onPress={() => console.log('Item pressed')}>
    <SwipeableListItem.Avatar
      source={{uri: 'https://via.placeholder.com/56'}}
      fallbackName="Bob"
    />
    <SwipeableListItem.Content name="Bob" isDeleted />
    <SwipeableListItem.Metadata timestamp="9:20 AM" />
  </SwipeableListItem>
);

/**
 * Chat item with message icon (delivered/read status)
 */
export const MessageWithIconItem = () => (
  <SwipeableListItem onPress={() => console.log('Item pressed')}>
    <SwipeableListItem.Avatar
      source={{uri: 'https://via.placeholder.com/56'}}
      fallbackName="Charlie"
    />
    <SwipeableListItem.Content
      name="Charlie"
      message="See you at 5!"
      messageIcon={GLYPHS['checkmark-circle-fill'].char}
      messageIconColor="#007AFF"
    />
    <SwipeableListItem.Metadata timestamp="8:15 AM" />
  </SwipeableListItem>
);

/**
 * Chat item in selection mode
 */
export const SelectionModeItem = () => {
  const [selected, setSelected] = React.useState(false);

  return (
    <SwipeableListItem
      isSelection
      selected={selected}
      onSelectChange={setSelected}
      onPress={() => console.log('Item pressed')}>
      <SwipeableListItem.Selection />
      <SwipeableListItem.Avatar
        source={{uri: 'https://via.placeholder.com/56'}}
        fallbackName="David"
      />
      <SwipeableListItem.Content name="David" message="Hello!" />
      <SwipeableListItem.Metadata timestamp="7:00 AM" />
    </SwipeableListItem>
  );
};

/**
 * Custom layout with children
 */
export const CustomLayoutItem = () => (
  <SwipeableListItem onPress={() => console.log('Item pressed')}>
    <SwipeableListItem.Avatar
      source={{uri: 'https://via.placeholder.com/56'}}
      fallbackName="Custom User"
    />
    <SwipeableListItem.Content>
      {/* Custom content layout */}
      <View>
        <Text>Custom Name</Text>
        <Text>Custom message layout with more control</Text>
      </View>
    </SwipeableListItem.Content>
    <SwipeableListItem.Metadata>
      {/* Custom metadata layout */}
      <View>
        <Text>Custom</Text>
      </View>
    </SwipeableListItem.Metadata>
  </SwipeableListItem>
);

/**
 * Full-featured chat item with all options
 */
export const FullFeaturedChatItem = () => (
  <SwipeableListItem
    onPress={() => console.log('Item pressed')}
    onLongPress={() => console.log('Long pressed')}
    backgroundColor="#F0F8FF">
    <SwipeableListItem.SwipeActions
      readStatus="unread"
      showPinAction
      onToggleReadStatus={() => console.log('Toggle read')}
      onTogglePin={() => console.log('Toggle pin')}
      onMute={() => console.log('Mute')}
      onArchive={() => console.log('Archive')}
      onMore={() => console.log('More')}
      leftActionColors={{read: '#007AFF', pin: '#8E8E93'}}
      rightActionColors={{mute: '#FF3B30', archive: '#FF9500', more: '#8E8E93'}}
    />
    <SwipeableListItem.Avatar
      source={{uri: 'https://via.placeholder.com/56'}}
      fallbackName="Emily"
    />
    <SwipeableListItem.Content
      name="Emily"
      message="This is a full-featured example"
      messageIcon={GLYPHS['checkmark-circle-fill'].char}
      messageIconColor="#34C759"
    />
    <SwipeableListItem.Metadata
      timestamp="3:45 PM"
      isPinned
      pinnedIcon={GLYPHS['pin-fill'].char}
      isMentioned
      unreadCount={5}
    />
  </SwipeableListItem>
);
