import React, {useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import {IconCalendarTime} from '@tabler/icons-react-native';
import {Accordion, Button, Typography} from '@components';
import {Post} from '@modules/post/interfaces';
import {getShortDateTime} from '@shared/utils';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  show: boolean;
  onPress: () => void;
  count: number;
  scheduledPosts: Post[];
}

function ScheduledPostsAlert({show, onPress, count, scheduledPosts}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();

  const closestScheduledPost = useMemo(
    () =>
      scheduledPosts?.sort(
        (a, b) =>
          new Date(a.publicationDatetime).getTime() -
          new Date(b.publicationDatetime).getTime(),
      )[0],
    [scheduledPosts],
  );

  return show ? (
    <Accordion style={styles.accordion}>
      <Accordion.Header>
        <Accordion.Avatar Icon={IconCalendarTime} />
        <Accordion.Title title={t('group.scheduled_posts_amount', {count})} />
        <Accordion.Icon />
      </Accordion.Header>
      <Accordion.Content>
        <Typography variant="xs" color={theme.text.neutral.lighter}>
          {t('group.next_scheduled_publication_on', {
            date: getShortDateTime(
              closestScheduledPost?.publicationDatetime || '',
            ),
          })}
        </Typography>
        <Button
          onPress={onPress}
          text={t('post.scheduled_count', {count})}
          size="sm"
        />
      </Accordion.Content>
    </Accordion>
  ) : null;
}

export default ScheduledPostsAlert;