import React from 'react';
import {useTranslation} from 'react-i18next';
import {useMutation, useQueryClient} from 'react-query';
import ScheduleComponent from '@components/_custom/NewPost/screens/Schedule/components/screen';
import {useGoBack} from '@hooks/useGoBack';
import {Navigation} from '@interfaces/navigation';
import {UserPermissions} from '@interfaces/user';
import {GROUP_QUERY_KEYS} from '@modules/group/constants';
import {changeGroupPublicationDateTime} from '@modules/group/services';
import {useLoggedUserIsAdmin} from '@modules/group/hooks/useLoggedUserIsAdmin';
import {
  changePublicationDateTime,
  changeSendNotification,
} from '@modules/post/services';
import {showSnackbar} from '@redux/dispatchers';
import {usePermission} from '@redux/selectors';
import {Screens} from '@shared/constants';

const ReschedulePost = ({
  route: {params},
}: Navigation<Screens.RESCHEDULE_POST>) => {
  const {postId, groupId, scheduleDateTime, sendNotification} = params;
  const isAdmin = useLoggedUserIsAdmin(groupId);
  const {goBack} = useGoBack();

  const canSendNotifications = usePermission(
    UserPermissions.SEND_PUSH_NOTIFICATION,
  );
  const queryClient = useQueryClient();
  const {t} = useTranslation();
  const changeGroupPostDateTimeMutation = useMutation(
    changeGroupPublicationDateTime,
    {
      onSuccess: () => {
        queryClient.refetchQueries(
          GROUP_QUERY_KEYS.groupScheduledPosts(groupId!),
        );
        showSnackbar({
          title: t('post.scheduled_successfully'),
          variant: 'success',
        });
        goBack();
      },
    },
  );
  const changePostDateTimeMutation = useMutation(
    async ({
      id,
      publicationDatetime,
      sendNotification: sendPushNotification,
    }: {
      id: number;
      publicationDatetime: Date;
      sendNotification?: boolean;
    }) => {
      await changePublicationDateTime({id, publicationDatetime});
      canSendNotifications &&
        sendPushNotification !== undefined &&
        (await changeSendNotification({
          id,
          sendNotification: sendPushNotification,
        }));
    },
  );

  const onSubmit = (date: Date, sendPushNotification?: boolean) => {
    if (groupId) {
      changeGroupPostDateTimeMutation.mutate({
        id: postId,
        groupId,
        publicationDatetime: date,
        ...(isAdmin && {
          sendNotification: sendPushNotification,
        }),
      });
    } else {
      changePostDateTimeMutation.mutate({
        id: postId,
        publicationDatetime: date,
        sendNotification: canSendNotifications
          ? sendPushNotification
          : undefined,
      });
      showSnackbar({
        title: t('post.scheduled_successfully'),
        variant: 'success',
      });
      goBack();
    }
  };
  return (
    <ScheduleComponent
      scheduleDateTime={scheduleDateTime}
      onSubmit={onSubmit}
      showNotificationCheckbox={groupId ? isAdmin : canSendNotifications}
      showNotificationDefaultValue={sendNotification}
      isLoading={
        changeGroupPostDateTimeMutation.isLoading ||
        changePostDateTimeMutation.isLoading
      }
    />
  );
};

export default ReschedulePost;