import { Query } from './Query';
import * as cacheApi from '@/api/cache/query';
import { useState } from 'react';
import type { QueryItem } from 'shared/types/cache';

type QueryListProps = QueryItem;

export const QueryList = ({ queries }: QueryListProps) => {
  const [deletedQueries, setDeletedQueries] = useState<QueryItem['queries']>([]);

  function handleDeleteQuery(queryKey: string) {
    return cacheApi
      .deleteQuery(queryKey)
      .then(() => setDeletedQueries([...deletedQueries, queryKey]));
  }

  const activeQueries = queries.filter((queryKey) => !deletedQueries.includes(queryKey));

  return activeQueries.map((queryKey) => (
    <Query key={queryKey} queryKey={queryKey} onDeleteQuery={() => handleDeleteQuery(queryKey)} />
  ));
};