import React, { useState } from 'react';
import {
  Image,
  StyleSheet,
  View,
  ViewStyle,
  ImageStyle,
  TextStyle,
} from 'react-native';
import { hasDebugLogger } from '@livelike/javascript';
import { convertDateTime } from '../../utils';
import { useStyles, useTheme } from '../../hooks';
import {
  IChatUserMessage,
  ComponentStyleProp,
  LLComponentStyleFn,
} from '../../types';
import { LLText } from '../LLText';

export type LLChatMessageItemHeaderStyles = {
  headerContainer: ViewStyle;
  avatarImage: ImageStyle;
  titleContainer: ViewStyle;
  username: TextStyle;
  ownUsername: TextStyle;
  timestamp: TextStyle;
  ownTimestamp: TextStyle;
};

export type LLChatMessageItemHeaderProps =
  ComponentStyleProp<LLChatMessageItemHeaderStyles> & {
    message: IChatUserMessage;
    isSelfMessage: boolean;
    formatMessageTimestamp?: (date: string) => string;
  };

export function LLChatMessageItemHeader({
  message: messageDetails,
  isSelfMessage,
  styles: stylesProp,
  formatMessageTimestamp = convertDateTime,
}: LLChatMessageItemHeaderProps) {
  const [imageLoadError, setImageLoadError] = useState(false);
  const { themeAssets } = useTheme();
  const messageItemHeaderStyles = useStyles({
    componentStylesFn: getMessageItemHeaderStyles,
    stylesProp,
  });
  return (
    <View style={messageItemHeaderStyles.headerContainer}>
      <Image
        style={messageItemHeaderStyles.avatarImage}
        source={
          messageDetails.sender_image_url && !imageLoadError
            ? {
                uri: messageDetails.sender_image_url,
              }
            : themeAssets.avatar
        }
        onError={() => {
          setImageLoadError(true);
          hasDebugLogger() && console.error('userAvatarUrl is invalid');
        }}
      />
      <View style={messageItemHeaderStyles.titleContainer}>
        <LLText
          style={[
            messageItemHeaderStyles.username,
            isSelfMessage && messageItemHeaderStyles.ownUsername,
          ]}
        >
          {messageDetails.sender_nickname}
        </LLText>
        <LLText
          style={[
            messageItemHeaderStyles.timestamp,
            isSelfMessage && messageItemHeaderStyles.ownTimestamp,
          ]}
        >
          {formatMessageTimestamp(messageDetails.created_at)}
        </LLText>
      </View>
    </View>
  );
}

const getMessageItemHeaderStyles: LLComponentStyleFn<
  LLChatMessageItemHeaderStyles
> = ({ theme }) =>
  StyleSheet.create({
    headerContainer: {
      display: 'flex',
      flexDirection: 'row',
      alignItems: 'center',
    },
    avatarImage: {
      borderRadius: 50,
      height: 30,
      width: 30,
      marginRight: 10,
      alignItems: 'flex-start',
    },
    titleContainer: {
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-start',
    },
    username: {
      fontWeight: 'bold',
      color: theme.text,
    },
    ownUsername: {},
    timestamp: {
      alignSelf: 'flex-start',
      fontSize: 10,
      color: theme.secondaryText,
      marginTop: 3,
    },
    ownTimestamp: {},
  });