import React, { useContext, memo } from 'react';
import { ContextPills } from '../../contexts';
import { SRow } from '../../../common/s-components/layout/s-row';
import { SBox } from '../../../common/s-components/layout/s-box';
import { Pill } from '../../../common/components/pill';
import { fp as _ } from '../../../common/utils/fp';
import { Skeleton } from './skeleton';
import { ROUTE_PARAMS, ROUTES } from '../../../app/constants';
import { Router } from '../../../common/utils/navigation-service';
import { MARKET_VARIANT_PARAMS } from '../../../market-selector/constants';

export const Pills = memo(() => {
  const props = useContext(ContextPills);
  const { markets /*, loading, refresh*/ } = props;
  // const showSkeleton = loading && !refresh;
  const showSkeleton = false;
  const owner = _.path('owner', markets);

  let pillLabel = '';
  let marketCode = '';
  pillLabel = owner === 'all' ? 'All markets' : '';
  marketCode = owner === 'all' ? 'empty' : owner;

  return (
    <>
      {showSkeleton ? (
        <SBox pb={28}>
          <Skeleton />
        </SBox>
      ) : null}

      {!showSkeleton ? (
        <SRow px={16} pb={28}>
          <Pill
            label={pillLabel}
            marketCode={marketCode}
            marketNameVariant="short_name"
            flagMarginTop={1}
            onPress={() => {
              Router.goTo(ROUTES.marketselector, {
                [ROUTE_PARAMS.marketVariant]: MARKET_VARIANT_PARAMS.tiktok,
                [ROUTE_PARAMS.marketCodeTiktok]: owner,
              });
            }}
          />
        </SRow>
      ) : null}
    </>
  );
});