import React, { memo, useCallback } from 'react';
import { useIsFocused } from '@react-navigation/native';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SText } from '../../../common/s-components/typography/s-text';
import { Pill } from '../../../common/components/pill';
import { VendorPlaylistPill } from './vendor-playlist-pill';
import { SRow } from '../../../common/s-components/layout/s-row';
import { Personalized } from './personalized';
import { TPlaylistCard } from '../../types';
import { Router } from '../../../common/utils/navigation-service';
import { ROUTES } from '../../../app/constants';
import { PillSkeleton } from '../../../common/components/pill-skeleton';
import { SH1 } from '../../../common/s-components/typography/s-h1';
import { VendorPlaylistPillSkeleton } from './vendor-playlist-pill-skeleton';
import { TVendor } from '../../../common/types';
import { fp as _ } from '../../../common/utils/fp';
import { MARKET_VARIANT_PARAMS } from '../../../market-selector/constants';
import { usePlaylistMarkets } from '../../../market-selector/hooks/use-playlist-markets';
import { useRoutingParams } from '../../../common/hooks/use-routing-params';
import { useStateLocked } from '../../../common/hooks/use-state-locked';
import { useAppSelector } from '../../../app/core/redux';
import { makePlaylistMarketsVisibilitySelector } from '../../selectors';
import { useResetOnRefresh } from './__hooks__/use-reset-on-refresh';

type TProps = TPlaylistCard & {
  vendor: TVendor;
  refresh: boolean;
};

export const Slide1: React.FC<TProps> = memo(props => {
  const { market, name, owner, vendor, personalized, refresh } = props;
  const playlistMarkets = usePlaylistMarkets();
  const goToMarketselector = useCallback(() => {
    Router.goTo(ROUTES.marketselector, {
      marketVariant: MARKET_VARIANT_PARAMS.playlist,
      marketCode: market,
    });
  }, [market]);
  const { playlistrootMarket } = useRoutingParams();
  // spotify -> get from server response market code

  const isSpotify = vendor === 'spotify';
  const isApple = vendor === 'apple';
  const isAmazon = vendor === 'amazon';

  const isFocused = useIsFocused();

  const playlistMarketsVisibility = useAppSelector(
    makePlaylistMarketsVisibilitySelector()
  );

  // start listening to state updates only when isFocused returns back to TRUE
  // if isFocused === FALSE stop listening playlistMarkets.data changes
  // and memorize the last value
  // const lockedData = playlistMarkets.data;
  // const lockedLoading = playlistMarkets.loading;
  // const lockedPlaylistMarket = playlistrootMarket;
  const [lockedSkeleton] = useStateLocked(
    playlistMarketsVisibility.skeleton,
    isFocused
  );
  const [lockedData] = useStateLocked(playlistMarkets.data, isFocused);
  const [lockedLoading] = useStateLocked(playlistMarkets.loading, isFocused);
  const [lockedPlaylistMarket] = useStateLocked(playlistrootMarket, isFocused);
  const [lockedError, setLockedError] = useStateLocked(
    playlistMarkets.error,
    isFocused
  );

  useResetOnRefresh(playlistMarkets.error, setLockedError, refresh);

  const touchable =
    !lockedLoading &&
    !lockedError &&
    (isAmazon || isApple) &&
    _.length(lockedData) > 1;

  return (
    <SBox alignItems="center" px={32}>
      <SH1 numberOfLines={1} ellipsizeMode="tail" mb={isAmazon ? 23 : 14}>
        {name}
      </SH1>
      {!isAmazon ? (
        <SText mb={isSpotify ? 10 : 20} medium>
          {owner ? `By ${owner}` : 'N/A'}
        </SText>
      ) : null}
      <SBox mb={isSpotify ? 17 : 24} ml={isSpotify ? 12 : 0}>
        {(_.isUndefined(lockedPlaylistMarket) || lockedSkeleton) &&
        !isSpotify ? (
          <PillSkeleton />
        ) : (
          <SBox>
            <Pill
              variant="dark"
              disabled={!touchable && !isSpotify}
              noTouchable={isSpotify}
              testID="playlist-gallery-card"
              marketCode={
                // here we should show market that was returned by backend api for playlist data
                isSpotify
                  ? market
                  : _.isNil(lockedPlaylistMarket)
                  ? undefined
                  : lockedPlaylistMarket
              }
              label="Owner"
              capitalize={isSpotify}
              onPress={() => {
                goToMarketselector();
              }}
            />
          </SBox>
        )}
      </SBox>
      <SRow>
        {vendor ? (
          <VendorPlaylistPill vendor={vendor} />
        ) : (
          <VendorPlaylistPillSkeleton />
        )}

        {personalized ? <Personalized ml={7} text="Personalized" /> : null}
      </SRow>
    </SBox>
  );
});