import React, {memo, useMemo} from 'react';
import {Pressable, StyleSheet, View} from 'react-native';
import Text from '@components/Text';
import RedBubble from '@components/RedBubble';
import {useLastMessage} from '@modules/chat/hooks';
import {
  BaseForm,
  FormStatus,
  FormStepType,
  FormType,
} from '@modules/form/interfaces';
import {
  formatFormTitle,
  getAgentStatus,
  getStatusText,
} from '@modules/form/utils';
import {getColor} from '@modules/form/screens/FormChatDetail/utils';
import {LastMessageText} from '@modules/chat/components/ChatRow/components/LastMessageText';
import {BORDER_RADIUS, ICON_SIZES, SPACING} from '@shared/theme';
import {COLORS} from '@shared/colors';

import FormIcon from '../FormIcon';
import Time from '../Time';

const AVATAR_SIZE = 52;

interface Props {
  form: BaseForm;
  agentFormType?: Nullable<FormStepType>;
  onPress: (form: BaseForm) => void;
  isResponsible?: boolean;
}

function FormChatRow({form, agentFormType, onPress, isResponsible}: Props) {
  const isForm = form.type === FormType.FORM;
  const {lastMessage, lastMessageDate} = useLastMessage({
    message: form.lastMessage,
  });
  const [statusText, statusColor] = useMemo(() => {
    const formStatus = (
      form.needApproval
        ? getAgentStatus({
            approvalStatus: form.approvalStatus,
            formStatus: agentFormType!,
            needApproval: form.needApproval,
            lastStepOfResponsibleStatus:
              form.lastStepOfResponsible?.approvalStatus,
          })
        : form?.approvalStatus
    ) as FormStatus;

    return [
      getStatusText({
        option:
          form?.withInProgressStatus && form?.formChat?.status
            ? form.formChat.status
            : formStatus,
        withInProgressStatus: form?.withInProgressStatus,
      }),
      getColor(formStatus),
    ];
  }, [agentFormType, form]);

  const handlePress = () => onPress(form);

  return (
    <Pressable onPress={handlePress} style={styles.content}>
      <View style={styles.leftContent}>
        <View style={[styles.avatar, isForm && styles.avatarBackground]}>
          <FormIcon
            type={form.type}
            stepsType={form.stepsType}
            style={styles.formIcon}
            iconSize={24}
          />
          <Text
            numberOfLines={1}
            adjustsFontSizeToFit
            variant="caption"
            minimumFontScale={0}
            align="center"
            style={styles.topicId}>
            ID {form.formId}
          </Text>
        </View>
      </View>
      <View style={styles.midContent}>
        <Text variant="subtitle1" numberOfLines={1} maxFontSizeMultiplier={1}>
          {formatFormTitle(form.title)}
        </Text>
        {form.creator && (
          <Text variant="subtitle1" numberOfLines={1}>
            {`${form.creator.firstName} ${form.creator.lastName}`}
          </Text>
        )}
        {isForm && (
          <>
            {statusText && (
              <View
                style={[
                  styles.formStateContainer,
                  {backgroundColor: statusColor},
                ]}>
                <Text
                  variant="subtitle2"
                  numberOfLines={1}
                  maxFontSizeMultiplier={1}
                  color={COLORS.WHITE}>
                  {statusText}
                </Text>
              </View>
            )}
          </>
        )}
        <LastMessageText lastMessage={lastMessage} />
      </View>
      <View style={styles.rightContent}>
        <Text
          numberOfLines={1}
          maxFontSizeMultiplier={1}
          color={COLORS.DARKEST_GRAY}
          variant="body2">
          {lastMessageDate}
        </Text>
        <View style={styles.bubbles}>
          {!!form.unreadMessages && form.unreadMessages > 0 && (
            <RedBubble
              value={form.unreadMessages}
              size={ICON_SIZES.x5}
              fontSize={12}
            />
          )}
          {form && <Time form={form} iAmApprover={isResponsible} />}
        </View>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  topicId: {paddingHorizontal: 4},
  topicContainerStyle: {
    alignSelf: 'flex-start',
    borderRadius: 10,
  },
  content: {
    flexDirection: 'row',
    paddingHorizontal: SPACING.x2,
    paddingVertical: SPACING.x1,
    gap: SPACING.x1,
  },
  leftContent: {
    justifyContent: 'center',
  },
  midContent: {
    flex: 1,
    justifyContent: 'space-between',
    paddingVertical: SPACING.x1,
  },
  midContentLastMessage: {
    flexDirection: 'row',
    gap: SPACING['x0.25'],
    alignItems: 'center',
  },
  rightContent: {
    alignItems: 'flex-end',
    paddingVertical: SPACING.x1,
    gap: SPACING['x0.5'],
  },
  avatar: {
    alignItems: 'center',
    borderRadius: AVATAR_SIZE / 2,
    justifyContent: 'center',
    width: AVATAR_SIZE,
    height: AVATAR_SIZE,
  },
  avatarBackground: {
    backgroundColor: COLORS.GRAY,
  },
  formIcon: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  formStateContainer: {
    alignSelf: 'flex-start',
    borderRadius: BORDER_RADIUS.m,
    marginVertical: SPACING['x0.5'],
    paddingHorizontal: SPACING.x1,
  },
  bubbles: {
    flexDirection: 'row',
    gap: 2,
    justifyContent: 'flex-end',
  },
});

export default memo(FormChatRow);