import React, { memo, useCallback } from 'react';
import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native';
import {
  isChatUserMessageResponsePayload,
  userProfile,
} from '@livelike/javascript';
import {
  LLChatMessageItemHeader,
  LLChatMessageItemHeaderProps,
} from './LLChatMessageItemHeader';
import {
  LLChatMessageItemBody,
  LLChatMessageItemBodyProps,
} from './LLChatMessageItemBody';
import {
  LLChatMessageItemFooter,
  LLChatMessageItemFooterProps,
} from './LLChatMessageItemFooter';
import {
  LLChatMessageMenu,
  LLChatMessageMenuOption,
} from '../LLChatMessageMenu';
import {
  useChatMessageMenuItemActions,
  useMessageItemPopover,
  useStyles,
  useTheme,
} from '../../hooks';
import {
  IChatMessage,
  PopoverType,
  ComponentStyleProp,
  LLComponentStyleFn,
} from '../../types';

export type LLChatMessageItemStyles = {
  messageItemContainer: ViewStyle;
  selfMessageItemContainer: ViewStyle;
};

export type LLChatMessageItemProps =
  ComponentStyleProp<LLChatMessageItemStyles> & {
    message: IChatMessage;
    MessageItemBodyComponent?: typeof LLChatMessageItemBody;
    MessageItemBodyComponentStyles?: LLChatMessageItemBodyProps['styles'];
    MessageItemHeaderComponent?: typeof LLChatMessageItemHeader;
    MessageItemHeaderComponentStyles?: LLChatMessageItemHeaderProps['styles'];
    MessageItemFooterComponent?: typeof LLChatMessageItemFooter;
    MessageItemFooterComponentStyles?: LLChatMessageItemFooterProps['styles'];
    MessageItemMenuComponent?: typeof LLChatMessageMenu;
    MessageItemMenuOptionComponent?: typeof LLChatMessageMenuOption;
  };

export const LLChatMessageItem = memo(
  ({
    message: messageDetails,
    styles: stylesProp,
    MessageItemBodyComponentStyles,
    MessageItemHeaderComponentStyles,
    MessageItemFooterComponentStyles,
    MessageItemBodyComponent = LLChatMessageItemBody,
    MessageItemHeaderComponent = LLChatMessageItemHeader,
    MessageItemFooterComponent = LLChatMessageItemFooter,
    MessageItemMenuComponent = LLChatMessageMenu,
    MessageItemMenuOptionComponent = LLChatMessageMenuOption,
  }: LLChatMessageItemProps) => {
    const { themeAssets } = useTheme();
    const messageItemStyles = useStyles({
      componentStylesFn: getMessageItemStyles,
      stylesProp,
    });
    const { popoverDetail, showPopover, hidePopover } = useMessageItemPopover({
      messageId: messageDetails.id,
    });
    const isSelfMessage = messageDetails.sender_id === userProfile.id;
    const isDeletedMessage = !!messageDetails.isDeleted;
    const isMenuPopoverVisible =
      popoverDetail && popoverDetail.popoverType === PopoverType.Menu;

    const onShowMessageItemMenu = useCallback(() => {
      showPopover({
        messageId: messageDetails.id,
        popoverType: PopoverType.Menu,
      });
    }, [messageDetails.id, showPopover]);

    const {
      deleteMessageApiFn,
      reportMessageApiFn,
      blockUnblockApiFn,
      blockId,
    } = useChatMessageMenuItemActions({ messageDetails });

    if (!isChatUserMessageResponsePayload(messageDetails)) {
      return null;
    }

    return (
      <View
        style={[
          messageItemStyles.messageItemContainer,
          isSelfMessage && messageItemStyles.selfMessageItemContainer,
        ]}
      >
        <TouchableOpacity
          onLongPress={onShowMessageItemMenu}
          onPress={hidePopover}
          activeOpacity={0.7}
        >
          <MessageItemHeaderComponent
            message={messageDetails}
            styles={MessageItemHeaderComponentStyles}
            isSelfMessage={isSelfMessage}
          />
          <MessageItemBodyComponent
            message={messageDetails}
            styles={MessageItemBodyComponentStyles}
            isSelfMessage={isSelfMessage}
          />
          <MessageItemFooterComponent
            message={messageDetails}
            styles={MessageItemFooterComponentStyles}
          />
        </TouchableOpacity>
        <MessageItemMenuComponent visible={isMenuPopoverVisible}>
          {isSelfMessage && !isDeletedMessage && (
            <MessageItemMenuOptionComponent
              onClickApiFn={deleteMessageApiFn}
              icon={themeAssets.bin}
              textDesc="Delete message"
            />
          )}
          {!isSelfMessage && !isDeletedMessage && (
            <MessageItemMenuOptionComponent
              onClickApiFn={reportMessageApiFn}
              icon={themeAssets.flag}
              textDesc="Report message"
            />
          )}
          {!isSelfMessage && (
            <MessageItemMenuOptionComponent
              onClickApiFn={blockUnblockApiFn}
              icon={themeAssets.blockUser}
              textDesc={blockId ? 'Unblock Profile' : 'Block profile'}
              divider={{ top: !isDeletedMessage }}
            />
          )}
        </MessageItemMenuComponent>
      </View>
    );
  }
);

const getMessageItemStyles: LLComponentStyleFn<LLChatMessageItemStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    messageItemContainer: {
      display: 'flex',
      flex: 1,
      flexDirection: 'column',
      paddingVertical: 10,
      paddingHorizontal: 14,
      marginVertical: 7,
      marginHorizontal: 12,
      borderRadius: 8,
      backgroundColor: theme.secondaryBackground,
    },
    selfMessageItemContainer: {},
  });