import React from 'react';
import { Image, StyleSheet, View, ViewStyle } from 'react-native';
import { useStyles } from '../../hooks';
import {
  LLChatMessageItemBodyText,
  LLChatMessageItemBodyTextProps,
} from './LLChatMessageItemBodyText';
import {
  IChatUserMessage,
  ComponentStyleProp,
  LLComponentStyleFn,
} from '../../types';

export type LLChatMessageItemBodyStyles = {
  textContainer: ViewStyle;
  selfMessageTextContainer: ViewStyle;
  textContent: ViewStyle;
};

export type LLChatMessageItemBodyProps =
  ComponentStyleProp<LLChatMessageItemBodyStyles> & {
    message: IChatUserMessage;
    isSelfMessage: boolean;
    ChatMessageItemBodyText?: typeof LLChatMessageItemBodyText;
    ChatMessageItemBodyTextStyles?: LLChatMessageItemBodyTextProps['styles'];
  };

export function LLChatMessageItemBody({
  message: messageDetails,
  isSelfMessage,
  styles: stylesProp,
  ChatMessageItemBodyTextStyles,
  ChatMessageItemBodyText = LLChatMessageItemBodyText,
}: LLChatMessageItemBodyProps) {
  const messageItemBodyStyles = useStyles({
    componentStylesFn: getMessageItemBodyStyles,
    stylesProp,
  });
  return (
    <View
      style={[
        messageItemBodyStyles.textContainer,
        isSelfMessage && messageItemBodyStyles.selfMessageTextContainer,
      ]}
    >
      {messageDetails.image_url && !messageDetails.isDeleted ? (
        <Image
          style={{
            display: 'flex',
            width: messageDetails.image_width,
            height: messageDetails.image_height,
            maxWidth: '95%',
          }}
          source={{ uri: messageDetails.image_url }}
          resizeMode="contain"
        />
      ) : (
        <View style={[messageItemBodyStyles.textContent]}>
          <ChatMessageItemBodyText
            message={messageDetails.message}
            isDeleted={messageDetails.isDeleted}
            isSelfMessage={isSelfMessage}
            styles={ChatMessageItemBodyTextStyles}
          />
        </View>
      )}
    </View>
  );
}

const getMessageItemBodyStyles: LLComponentStyleFn<LLChatMessageItemBodyStyles> =
  ({ theme }) =>
    StyleSheet.create({
      textContainer: {
        alignSelf: 'flex-start',
        marginTop: 8,
        flexWrap: 'wrap',
      },
      selfMessageTextContainer: {},
      textContent: {
        alignSelf: 'flex-start',
        alignItems: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap',
      },
    });