import React, { MutableRefObject } from 'react';
import { IViewList } from '@devesharp/react-hooks';
import { ICardContainerProps } from './CardListingContainer/CardListingContainer.interface';
import {IFiltersComponentProps, IFiltersContainerProps} from './FiltersContainer/FiltersContainer.interface';

export type IFilterComponent<T = any> = React.FunctionComponent<{
   handleFilters: (v: () => T) => void;
   filters: T;
}>;

export interface IPageListingProps {
   viewList: IViewList;
   data?: any;
   // FiltersComponent: IFilterComponent;
   // tabs?: IPropsTabs;
   // tagsFilters?: Partial<IPropsTagFilter>;
   // sortOptions?: {
   //    name: any;
   //    value: any;
   // }[];
   // renderResource: (resource: any, index: number) => JSX.Element;
   // renderResourceSkeleton?: (resource: any, index: number) => JSX.Element;
}

export interface IPageListing {
   Container: React.ComponentType<IPageListingProps>;
   ScrollContainer: React.ComponentType<React.HTMLAttributes<HTMLDivElement>>;
   FiltersContainer: React.ComponentType<IFiltersContainerProps>;
   Context: React.ComponentType<{ render: (props: IPageListingChildrenProps) => React.ReactNode }>;
   CardsContainer: React.ComponentType<ICardContainerProps>;
   TextResultCount: React.ComponentType<any>;
}

export interface IPageListingChildrenProps extends IViewList {
   listingElRef: MutableRefObject<any>;
   updateFilters: (data: any) => void;
   clearFilters: () => void;
   filters: any;
   updateFiltersDebounce: (data: any) => void;
   applyFiltersDebounce: () => void;
   currentPage: number;
   setPage: (page: number) => void;
   filterMobileOpen: boolean;
   openFilters: () => void;
   closeFilters: () => void;
   pageCountStart: number;
   pageCountEnd: number;
   showCardsSkeleton: boolean;
   showCards: boolean;
   data: any;
}
