import { type FC, memo } from 'react';

import { IconCalendarClock } from '@material-hu/icons/tabler';

import { useAuth } from 'src/contexts/JWTContext';
import { getFormatedDateTime } from 'src/utils/date';
import { getNextScheduledPost } from 'src/utils/feed';
import { useLokaliseTranslation as useTranslation } from 'src/utils/i18n';
import { flatPages } from 'src/utils/pagination';

import AlertAccordion from 'src/components/pendingApprovals/AlertAccordion';

import useScheduledPostsQuery from './useScheduledPostsQuery';

export type SchedulePostFeedbackProps = {
  onSeePosts: () => void;
};

const SchedulePostFeedback: FC<SchedulePostFeedbackProps> = props => {
  const { onSeePosts } = props;

  const { t } = useTranslation('post');
  const { user } = useAuth();

  const { data } = useScheduledPostsQuery();
  const scheduledPosts = flatPages(data);
  const nextScheduledPost = getNextScheduledPost(scheduledPosts);

  if (scheduledPosts.length === 0 || !nextScheduledPost) {
    return null;
  }

  return (
    <AlertAccordion
      Icon={IconCalendarClock}
      title={t('schedule_amount', { count: scheduledPosts.length })}
      description={t('next_scheduled_post', {
        date: getFormatedDateTime(
          nextScheduledPost.publicationDatetime,
          user ?? undefined,
        ),
      })}
      buttonTitle={t('see_posts')}
      onClick={onSeePosts}
    />
  );
};

export default memo(SchedulePostFeedback);