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 { Router } from '../../../common/utils/navigation-service';
import { ROUTE_PARAMS, ROUTES } from '../../../app/constants';
import {
  MARKET_VARIANT_PARAMS,
  TOP_MARKETS_AS_STRING,
} from '../../../market-selector/constants';
import { TAB_VARIANT } from '../../constants';
import { Skeleton } from './skeleton';

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

  let pillLabel = '';
  let marketCode = '';
  if (activeTab === TAB_VARIANT.spotify) {
    pillLabel = owner === 'all' ? 'All owner markets' : `owner`;
    marketCode = owner === 'all' ? 'empty' : owner;
  }
  if (activeTab === TAB_VARIANT.apple || activeTab === TAB_VARIANT.amazon) {
    pillLabel =
      owner === TOP_MARKETS_AS_STRING || owner === '_gl'
        ? 'Top 6 owner markets'
        : `owner`;
    marketCode =
      owner === TOP_MARKETS_AS_STRING || owner === '_gl' ? 'empty' : owner;
  }

  return (
    <>
      {showSkeleton ? (
        <SBox mb={32}>
          <Skeleton />
        </SBox>
      ) : null}

      {!showSkeleton ? (
        <SRow px={16} mb={32}>
          <SBox>
            <Pill
              label={pillLabel}
              marketCode={marketCode}
              flagMarginTop={1}
              onPress={() => {
                Router.goTo(ROUTES.marketselector, {
                  [ROUTE_PARAMS.marketVariant]:
                    activeTab === TAB_VARIANT.spotify
                      ? MARKET_VARIANT_PARAMS.trackPlaylistSpotifyOwner
                      : activeTab === TAB_VARIANT.apple
                      ? MARKET_VARIANT_PARAMS.trackPlaylistAppleOwner
                      : MARKET_VARIANT_PARAMS.trackPlaylistAmazonOwner,
                  [ROUTE_PARAMS.marketCodePlaylistOwner]: owner,
                  [ROUTE_PARAMS.marketCodePlaylistStreams]: streams,
                });
              }}
            />
          </SBox>
          {activeTab === TAB_VARIANT.spotify ? (
            <SBox ml={11}>
              <Pill
                label="streams"
                marketCode={streams}
                flagMarginTop={1}
                onPress={() => {
                  Router.goTo(ROUTES.marketselector, {
                    [ROUTE_PARAMS.marketVariant]:
                      MARKET_VARIANT_PARAMS.trackPlaylistSpotifyStreams,
                    [ROUTE_PARAMS.marketCodePlaylistOwner]: owner,
                    [ROUTE_PARAMS.marketCodePlaylistStreams]: streams,
                  });
                }}
              />
            </SBox>
          ) : null}
        </SRow>
      ) : null}
    </>
  );
});