import React, { memo, useCallback } from 'react';
import { Platform } from 'react-native';
import { Undefinable } from 'tsdef';
import { RefreshableView } from '../../common/components/refreshable-view';
import { SBoxAnimated } from '../../common/s-components/layout/s-box-animated';
import { ViewNetworkFailed } from '../../common/components/view-network-failed';
import { SBox } from '../../common/s-components/layout/s-box';
import { addSafeArea } from '../../common/transducers';
import {
  TEntityMarket,
  TLightMarketVariant,
  TMarketSourcePage,
  TNetworkFailedVariant,
  TSetActive,
} from '../types';
import { NoResults } from '../../common/components/no-results';
import { SKeyboardAvoidingView } from '../../common/s-components/s-keyboard-avoiding-view';
import { ViewLoadFailed } from '../../common/components/view-load-failed';
import { Skeleton } from './skeleton';
import { TEntityVisibility, TRefreshableRenderer } from '../../common/types';
import { fp as _ } from '../../common/utils/fp';
import { checkIsLight } from '../transducers';
import { ROUTES } from '../../app/constants';
import { Header } from './header';
import { TUpdateNotificationSettings } from '../../notification-settings/types';
import { MARKET_VARIANT_PARAMS } from '../constants';
import { MarketsNotificationsSettings } from './markets-notifications-settings';
import { MarketsUser } from './markets-user';
import { MarketTrackPlaylistsSpotify } from './markets-track-playlists-spotify';
import { MarketsTrackPlaylists } from './markets-track-playlists';
import { MarketsPlaylist } from './markets-playlist';
import { usePlaylistMarkets } from '../hooks/use-playlist-markets';

export type TProps = {
  // navigation: PropTypes.object.isRequired,
  // loading: PropTypes.bool.isRequired,
  // navigation: TNavigation;
  markets: TEntityMarket;
  refreshing: boolean;
  refresh: () => void;
  visibility: TEntityVisibility;
  active: Undefinable<string>;
  setSearch: (value: Undefinable<string>) => void;
  setActive: TSetActive;
  setUserMarket: (code: string) => void;
  marketVariant: TMarketSourcePage;
  searchValue: Undefinable<string>;
  updateNotificationSettings: TUpdateNotificationSettings;
  userMarket: Undefinable<string>;
  marketCodePlaylistOwner?: string;
  marketCodePlaylistStreams?: string;
  activeRouteMarket?: string;
};

export const MarketSelector: React.FC<TProps> = memo(props => {
  const {
    refreshing,
    refresh,
    visibility,
    marketVariant,
    setSearch,
    searchValue,
    active,
    setActive,
    setUserMarket,
    updateNotificationSettings,
    userMarket,
    marketCodePlaylistOwner,
    marketCodePlaylistStreams,
    markets,
    activeRouteMarket,
  } = props;
  const lightBgVariant = checkIsLight(marketVariant as TLightMarketVariant);
  const bgColor = lightBgVariant ? 'white' : 'ebonyClay';
  const maxHeight = addSafeArea(
    marketVariant === MARKET_VARIANT_PARAMS.notificationSettings ? 273 : 162
  );

  const HEADER_WITHOUT_SEARCH = addSafeArea(52);

  const renderHeader: TRefreshableRenderer = useCallback(
    ({ animationY, scrollToTop, isScrolled }) => {
      return (
        <Header
          animationY={animationY}
          isScrolled={isScrolled}
          scrollToTop={scrollToTop}
          visibility={visibility}
          setSearch={setSearch}
          searchValue={searchValue}
          marketVariant={marketVariant}
          active={active}
          setActive={setActive}
          setUserMarket={setUserMarket}
          updateNotificationSettings={updateNotificationSettings}
          userMarket={userMarket}
          marketCodePlaylistStreams={marketCodePlaylistStreams}
          marketCodePlaylistOwner={marketCodePlaylistOwner}
          activeRouteMarket={activeRouteMarket}
        />
      );
    },
    [
      visibility,
      setSearch,
      searchValue,
      marketVariant,
      active,
      setActive,
      setUserMarket,
      updateNotificationSettings,
      userMarket,
      marketCodePlaylistOwner,
      marketCodePlaylistStreams,
    ]
  );

  const playlistMarkets = usePlaylistMarkets();

  const renderBody = useCallback(() => {
    const paddingTop = _.path('empty', visibility)
      ? HEADER_WITHOUT_SEARCH
      : maxHeight;
    const lightVariant = checkIsLight(marketVariant as TLightMarketVariant);
    const placeholderVariant = lightVariant ? '-light' : '';
    const figureColor = lightVariant ? 'richBlack' : 'white';
    const selectMarketColor = lightVariant ? 'romanPurple' : 'periwinkleGray';
    const isIos = Platform.OS === 'ios';
    const isNotificationSettings = marketVariant === 'notificationSettings';
    const isYoutube =
      marketVariant === MARKET_VARIANT_PARAMS.youtubeVideo ||
      marketVariant === MARKET_VARIANT_PARAMS.youtubeAllVideos;
    const keyboardHiddenMarginIos = isNotificationSettings
      ? 110
      : isYoutube
      ? 8
      : -20;
    const keyboardHiddenMarginAndroid = isNotificationSettings ? 50 : 0;
    const keyboardHiddenMargin = isIos
      ? keyboardHiddenMarginIos
      : keyboardHiddenMarginAndroid;
    const keyboardDisplayedMargin = isNotificationSettings
      ? isIos
        ? 80
        : 165
      : isYoutube
      ? -6
      : -32;

    const vOffset = Platform.OS === 'android' ? -200 : 186;

    const renderMarketsUser = [
      MARKET_VARIANT_PARAMS.home,
      MARKET_VARIANT_PARAMS.market,
      MARKET_VARIANT_PARAMS.profile,
      MARKET_VARIANT_PARAMS.trackMarkets,
      MARKET_VARIANT_PARAMS.youtubeVideo,
      MARKET_VARIANT_PARAMS.youtubeAllVideos,
      MARKET_VARIANT_PARAMS.tiktok,
      MARKET_VARIANT_PARAMS.playlistPerformance,
    ].includes(marketVariant as MARKET_VARIANT_PARAMS);

    const renderMarketsTrackPlaylists = [
      MARKET_VARIANT_PARAMS.trackPlaylistAppleOwner,
      MARKET_VARIANT_PARAMS.trackPlaylistAmazonOwner,
    ].includes(marketVariant as MARKET_VARIANT_PARAMS);

    const renderMarketsTrackPlaylistsSpotify = [
      MARKET_VARIANT_PARAMS.trackPlaylistSpotifyOwner,
      MARKET_VARIANT_PARAMS.trackPlaylistSpotifyStreams,
    ].includes(marketVariant as MARKET_VARIANT_PARAMS);

    const renderMarketsNotificationsSettings =
      marketVariant === MARKET_VARIANT_PARAMS.notificationSettings;

    const renderMarketsPlaylist =
      marketVariant === MARKET_VARIANT_PARAMS.playlist;

    return (
      <>
        <SBoxAnimated position="relative" flex={1} pt={paddingTop} pb={26}>
          {visibility.skeleton ? (
            <Skeleton lightVariant={lightVariant} />
          ) : null}
          {visibility.empty ? (
            <NoResults
              keyboardDisplayedMargin={keyboardDisplayedMargin}
              keyboardHiddenMargin={keyboardHiddenMargin}
              withAnimation
              figureVariant={`no-search${placeholderVariant}`}
              color={figureColor}
            />
          ) : null}
          {visibility.error ? (
            <ViewLoadFailed
              figureVariant={`load-failed${placeholderVariant}`}
              variant="market"
              color={figureColor}
              verticalOffset={183}
            />
          ) : null}
          {visibility.offline ? (
            <ViewNetworkFailed
              variant={
                `network-failed${placeholderVariant}` as TNetworkFailedVariant
              }
              color={figureColor}
              verticalOffset={isNotificationSettings ? 322 : vOffset}
            />
          ) : null}

          {visibility.data &&
          !visibility.error &&
          !visibility.offline &&
          !visibility.empty ? (
            <SBox mb={32}>
              {renderMarketsNotificationsSettings ? (
                <MarketsNotificationsSettings
                  markets={markets}
                  marketVariant={marketVariant}
                  active={active}
                  setActive={setActive}
                />
              ) : null}

              {renderMarketsTrackPlaylistsSpotify ? (
                <MarketTrackPlaylistsSpotify
                  marketVariant={marketVariant}
                  selectMarketColor={selectMarketColor}
                  active={active}
                  setActive={setActive}
                  markets={markets}
                />
              ) : null}

              {renderMarketsTrackPlaylists ? (
                <MarketsTrackPlaylists
                  marketVariant={marketVariant}
                  selectMarketColor={selectMarketColor}
                  active={active}
                  setActive={setActive}
                  markets={markets}
                />
              ) : null}

              {renderMarketsUser ? (
                <MarketsUser
                  marketVariant={marketVariant}
                  selectMarketColor={selectMarketColor}
                  markets={markets}
                  active={active}
                  setActive={setActive}
                />
              ) : null}

              {renderMarketsPlaylist ? (
                <MarketsPlaylist
                  selectMarketColor={selectMarketColor}
                  active={active}
                  setActive={setActive}
                />
              ) : null}
            </SBox>
          ) : null}
        </SBoxAnimated>
      </>
    );
  }, [visibility, markets, active, setActive, marketVariant, playlistMarkets]);

  return (
    <SKeyboardAvoidingView behavior="padding" enabled>
      <RefreshableView
        testID="market-selector-refreshable-view"
        loading={refreshing}
        indicatorOffsetTop={maxHeight}
        onPullDown={() => !visibility.skeleton && refresh()}
        renderHeader={renderHeader}
        renderBody={renderBody}
        name={ROUTES.marketselector}
        bgColor={bgColor}
        statusBarLight={!lightBgVariant}
        statusBarToggleByScroll={lightBgVariant}
        withNativeDriver
      />
    </SKeyboardAvoidingView>
  );
});