import React from 'react';
import { TParsedEntity } from '../types';
import { TCustomRangeEntity, TVendor } from '../../common/types';
import { ByAge } from './by-age';
import { ByGender } from './by-gender';
// import { Skeleton1 } from './skeleton1';
import { fp as _ } from '../../common/utils/fp';
import { TData } from '../../track/types';

type TProps = {
  onPressCard: (variant: string) => void;
  range: TCustomRangeEntity;
  entity: TParsedEntity;
  activeTab: TVendor;
  trackData: TData | {};
};

export const TabContent: React.FC<TProps> = props => {
  const { entity, range, activeTab, onPressCard, trackData } = props;
  const { error, data } = entity;
  const isData = data && !error;
  const isEmpty = !data && !error;
  const isError = !data && error;
  const rangePeriod = isData ? range : null;
  const { id, name, isrc } = trackData as TData;
  const amplitudeDemographicsOptions = {
    id,
    name,
    isrc,
    vendor: activeTab,
  };

  return (
    <>
      {isData || isEmpty || isError ? (
        <>
          <ByGender
            byGender={_.path('byGender', data)}
            range={rangePeriod!}
            isEmpty={isEmpty}
            isError={isError}
            vendor={activeTab}
            onPressCard={onPressCard}
            amplitudeParams={amplitudeDemographicsOptions}
          />
          <ByAge
            byAge={_.path('byAge', data)}
            range={rangePeriod!}
            total={_.path('total', data)}
            isEmpty={isEmpty}
            isError={isError}
            vendor={activeTab}
          />
        </>
      ) : null}
    </>
  );
};