import React, { memo, useCallback } from 'react';
import { Nullable } from 'tsdef';
import { InfoTitle } from '../../common/components/info-title';
import { SBox } from '../../common/s-components/layout/s-box';
import { TVisibility, TEmptyDataRes /*, TNavigation */ } from '../types';
import { Skeleton } from './skeleton';
import { HorizontalCarousel } from './horizontal-carousel';
import { togglePopup } from '../../common/utils/swipeable-popup-service';
import { CLICK_SOURCES, onInfoIconPress } from '../../analytics';
import { EmptyMarkets } from './empty-markets';
import { Portal } from '../../common/utils/portal/portal';
import { SwipeablePopup } from '../../common/components/bottom-sheet/swipeable-popup';
import { InfoMarkets } from './info-markets';
import { Button } from '../../common/components/button';
import { SRow } from '../../common/s-components/layout/s-row';
import { Router } from '../../common/utils/navigation-service';
import { ROUTES } from '../../app/constants';
import { NMarket } from '../../common/types';

type TProps = {
  visibility: TVisibility;
  // navigation: TNavigation;
  cards: Nullable<NMarket.TMarketItem>[];
  emptyData: TEmptyDataRes;
};

export const TrackMarkets: React.FC<TProps> = memo(props => {
  const { visibility, cards, emptyData } = props;
  const infoPressHandler = (variant: string) => {
    togglePopup(variant);
    onInfoIconPress({ source_section: CLICK_SOURCES.MARKETS });
  };

  const goToMarket = (marketCode: string) => {
    Router.goTo(ROUTES.market, {
      marketCode,
    });
  };

  const goToMarkets = () => {
    Router.goTo(ROUTES.markets, {
      marketTab: 'top',
    });
  };

  const renderFgLayer = useCallback(() => {
    if (visibility.skeleton) return null;

    return (
      <>
        <Portal id="track-markets" updateIfAnyChanged={{ cards }}>
          <SwipeablePopup
            variant="markets"
            content={<InfoMarkets cards={cards} />}
          />
        </Portal>
      </>
    );
  }, [visibility]);

  return (
    <>
      {renderFgLayer()}
      <SBox position="relative" mb={-1} pt={5}>
        {visibility.skeleton ? <Skeleton /> : null}

        {!visibility.skeleton ? (
          <SRow mx={16} height={71} justifyContent="space-between">
            <InfoTitle
              testID="info-title-markets"
              mt={-30}
              title="Markets"
              onPress={() => {
                infoPressHandler('markets');
              }}
            />

            {!visibility.empty && !visibility.error ? (
              <Button
                testID="track-markets-show-all-button"
                variant="gold"
                onPress={goToMarkets}
                px={15}
              >
                Top Markets
              </Button>
            ) : null}
          </SRow>
        ) : null}

        {visibility.empty ? (
          <SBox pb={56} bg="ebonyClay">
            <SBox mx={16}>
              <EmptyMarkets
                marketCode={emptyData.marketCode}
                marketFullName={emptyData.marketName}
              />
            </SBox>
          </SBox>
        ) : null}

        {visibility.data ? (
          <HorizontalCarousel cards={cards} onCardPress={goToMarket} />
        ) : null}
        {!visibility.empty ? <SBox bg="ebonyClay" height={44} /> : null}
      </SBox>
    </>
  );
});