import React from 'react';
import {InfiniteData} from 'react-query';
import {IconCircleCheck, IconEdit} from '@tabler/icons-react-native';
import {CursorPageData} from '@config/api';
import {queryClient} from '@config/queryClient';
import {DraftPost, DraftState} from '@modules/drafts/interfaces';
import {ICON_SIZES} from '@shared/theme';

import {DRAFT_QUERY_KEYS} from './constants';

export const removeDraftFromList = (
  draftId: number,
  state: DraftState,
  mine: boolean,
) => {
  queryClient.setQueryData<InfiniteData<CursorPageData<DraftPost>> | undefined>(
    DRAFT_QUERY_KEYS.draftPosts(state, mine),
    oldData => {
      if (!oldData) {
        return oldData;
      }
      const newPages = oldData.pages.map(page => ({
        ...page,
        items: page.items.filter(item => item.id !== draftId),
      }));
      return {
        ...oldData,
        pages: newPages,
      } as InfiniteData<CursorPageData<DraftPost>>;
    },
  );
};

export const addDraftToList = (
  draft: DraftPost,
  state: DraftState,
  mine: boolean,
) => {
  queryClient.setQueryData<InfiniteData<CursorPageData<DraftPost>> | undefined>(
    DRAFT_QUERY_KEYS.draftPosts(state, mine),
    oldData => {
      if (!oldData) {
        return oldData;
      }
      oldData.pages[0].items = [draft, ...oldData.pages[0].items];
      return {
        ...oldData,
        pages: oldData.pages,
      } as InfiniteData<CursorPageData<DraftPost>>;
    },
  );
};

export const updateDraftToList = (
  draft: DraftPost,
  state: DraftState,
  mine: boolean,
) => {
  queryClient.setQueryData<InfiniteData<CursorPageData<DraftPost>> | undefined>(
    DRAFT_QUERY_KEYS.draftPosts(state, mine),
    oldData => {
      if (!oldData) {
        return oldData;
      }
      const newPages = oldData.pages.map(page => ({
        ...page,
        items: page.items.map(item => (item.id === draft.id ? draft : item)),
      }));
      return {
        ...oldData,
        pages: newPages,
      } as InfiniteData<CursorPageData<DraftPost>>;
    },
  );
};

const draftEmptyStates = {
  [DraftState.Approved]: {
    title: 'drafts.main.no_approved_drafts_yet',
    IconComponent: <IconEdit size={ICON_SIZES.x16} />,
  },
  [DraftState.Overdue]: {
    title: 'drafts.main.no_overdue_drafts_yet',
    IconComponent: <IconCircleCheck size={ICON_SIZES.x16} />,
  },
  [DraftState.Pending]: {
    title: 'drafts.main.no_pending_approval_drafts_yet',
    IconComponent: <IconCircleCheck size={ICON_SIZES.x16} />,
  },
};
export const getEmptyListProps = (
  mine: boolean,
  draftState: DraftState,
  t: (param: string) => string,
) => {
  const emptyState =
    draftEmptyStates[draftState as keyof typeof draftEmptyStates];
  if (emptyState) {
    return {
      title: t(emptyState.title),
      IconComponent: emptyState.IconComponent,
    };
  }
  return {
    title: t(
      mine
        ? 'drafts.main.no_drafts_mine_title'
        : 'drafts.main.no_drafts_other_title',
    ),
    description: t(
      mine
        ? 'drafts.main.no_drafts_mine_subtitle'
        : 'drafts.main.no_drafts_other_subtitle',
    ),
    IconComponent: <IconEdit size={ICON_SIZES.x16} />,
  };
};