import React, { useContext, memo } from 'react';
import { ContextFiltered } from '../../contexts';
import { Skeleton } from './skeleton';
import { Empty } from './empty';
import { Error } from './error';
import { SWrapper } from './s-components/s-wrapper';
import { Card } from './card';

// type TProps = {};

export const Filtered = memo(() => {
  const props = useContext(ContextFiltered);

  const { visibility, entity, activeTab, trackName, markets } = props;

  return (
    <SWrapper>
      {visibility.skeleton ? <Skeleton /> : null}
      {visibility.empty ? <Empty vendor={activeTab} /> : null}
      {visibility.error || visibility.offline ? (
        <Error vendor={activeTab} />
      ) : null}
      {visibility.data ? (
        <Card
          entity={entity}
          vendor={activeTab}
          trackName={trackName}
          markets={markets}
        />
      ) : null}
    </SWrapper>
  );
});