import React, { useMemo } from 'react';

import { StyleSheet, Text, View } from 'react-native';

import { ReminderState } from 'stream-chat';

import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
import { useMessageContext } from '../../../../contexts/messageContext/MessageContext';
import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
import { useMessageReminder } from '../../../../hooks/useMessageReminder';
import { useStateStore } from '../../../../hooks/useStateStore';
import { primitives } from '../../../../theme';
import { useShouldUseOverlayStyles } from '../../hooks/useShouldUseOverlayStyles';

const reminderStateSelector = (state: ReminderState) => ({
  timeLeftMs: state.timeLeftMs,
});

type MessageReminderHeaderPropsWithContext = {
  timeLeftMs?: number;
  isReminderTimeLeft: boolean;
};

const MessageReminderHeaderWithContext = (props: MessageReminderHeaderPropsWithContext) => {
  const { timeLeftMs, isReminderTimeLeft } = props;
  const { t } = useTranslationContext();
  const styles = useStyles();
  const { icons } = useComponentsContext();

  return (
    <View accessibilityLabel='Message Saved For Later Header' style={styles.container}>
      <icons.Bell height={16} width={16} stroke={styles.time.color} />
      <Text style={styles.label}>
        {isReminderTimeLeft ? t('Reminder set') : t('Reminder overdue')}
      </Text>
      <Text
        accessibilityElementsHidden
        importantForAccessibility='no-hide-descendants'
        style={styles.dot}
      >
        ·
      </Text>
      <Text style={styles.time}>
        {t('duration/Message reminder', {
          milliseconds: timeLeftMs,
        })}
      </Text>
    </View>
  );
};

export type MessageReminderHeaderProps = Partial<MessageReminderHeaderPropsWithContext>;

export const MessageReminderHeader = (props: MessageReminderHeaderProps) => {
  const { message } = useMessageContext();
  const reminder = useMessageReminder(message.id);
  const { timeLeftMs } = useStateStore(reminder?.state, reminderStateSelector) ?? {};

  const isReminderTimeLeft = !!(timeLeftMs && timeLeftMs > 0);

  return (
    <MessageReminderHeaderWithContext
      timeLeftMs={timeLeftMs ?? 0}
      isReminderTimeLeft={isReminderTimeLeft}
      {...props}
    />
  );
};

const useStyles = () => {
  const {
    theme: {
      semantics,
      messageItemView: {
        reminderHeader: { container, label, dot, time },
      },
    },
  } = useTheme();
  const shouldUseOverlayStyles = useShouldUseOverlayStyles();

  return useMemo(() => {
    return StyleSheet.create({
      container: {
        alignItems: 'center',
        flexDirection: 'row',
        gap: primitives.spacingXxs,
        paddingVertical: primitives.spacingXxs,
        ...container,
      },
      label: {
        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
        fontSize: primitives.typographyFontSizeXs,
        fontWeight: primitives.typographyFontWeightSemiBold,
        lineHeight: primitives.typographyLineHeightTight,
        ...label,
      },
      dot: {
        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
        fontSize: primitives.typographyFontSizeXs,
        fontWeight: primitives.typographyFontWeightRegular,
        lineHeight: primitives.typographyLineHeightTight,
        ...dot,
      },
      time: {
        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
        fontSize: primitives.typographyFontSizeXs,
        fontWeight: primitives.typographyFontWeightRegular,
        lineHeight: primitives.typographyLineHeightTight,
        ...time,
      },
    });
  }, [shouldUseOverlayStyles, container, semantics, label, dot, time]);
};