import React, { memo, useCallback, useEffect } from 'react';
import { Dimensions } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { RefreshableView } from '../../common/components/refreshable-view';
import { theme } from '../../app/theme';
import { SBox } from '../../common/s-components/layout/s-box';
import { Avatar } from './avatar/avatar';
import {
  TVisibilityConfig,
  TState as TTrackState /*, TRoute */,
} from '../types';
import { SHeaderBg } from '../s-components/s-header-bg';
import { SHeaderGradient } from '../s-components/s-header-gradient';
import { ViewNetworkFailed } from '../../common/components/view-network-failed';
import { ViewLoadFailed } from '../../common/components/view-load-failed';
import { addSafeArea } from '../../common/transducers';
import TrackMarkets from '../../track-markets';
import TrackPlaylists from '../../track-playlists';
import TrackCharts from '../../track-charts';
import TrackNmf from '../../track-nmf';
import { setPortraitOrientation } from '../../common/utils/device-utils';
import {
  TRefreshableRenderer,
  TRouteParams,
  TState as TCommonState,
} from '../../common/types';
import { fp as _ } from '../../common/utils/fp';
import { ROUTES } from '../../app/constants';
import { Header } from './header';
import { TVisibility as TVisibilityTrackCharts } from '../../track-charts/types';
import { TVisibility as TVisibilityTrackMarkets } from '../../track-markets/types';
import { TVisibility as TVisibilityTrackPlaylists } from '../../track-playlists/types';
import { TrackInfo } from './track-info/track-info';
import { RotationOverlay } from '../../common/components/rotation-overlay';
import { TState as TStateNmf } from '../../track-nmf/types';
import TrackYoutube from '../../track-video/containers/track-video';

const maxHeight = addSafeArea(88);
const { width } = Dimensions.get('window');

type TProps = {
  visibility: TVisibilityConfig;
  visibilityCharts: TVisibilityTrackCharts;
  visibilityMarkets: TVisibilityTrackMarkets;
  visibilityPlaylists: TVisibilityTrackPlaylists;
  refreshing: TTrackState['refresh'];
  refresh: () => void;
  track: TTrackState['track'];
  isStarred: boolean;
  toggleStarred: () => void;
  routeParams?: TRouteParams;
  inited: TTrackState['inited'];
  // route: TRoute;
  nmfData: TStateNmf['nmfData'];
  hhData: TStateNmf['hhData'];
  starred: TCommonState['starred'];
};

export const Track: React.FC<TProps> = memo(props => {
  const {
    refreshing,
    refresh,
    inited,
    visibility,
    visibilityCharts,
    visibilityMarkets,
    visibilityPlaylists,
    track,
    starred,
    toggleStarred,
    routeParams,
    // route,
    isStarred,
    nmfData,
    hhData,
  } = props;

  useEffect(() => {
    setPortraitOrientation();
  }, []);

  const renderBody: TRefreshableRenderer = useCallback(
    ({ animationY }) => {
      const anyOffline =
        _.path('offline', visibility) ||
        _.path('offline', visibilityCharts) ||
        _.path('offline', visibilityMarkets) ||
        _.path('offline', visibilityPlaylists);

      if (anyOffline) {
        return (
          <SBox flex={1}>
            <ViewNetworkFailed verticalOffset={6} />
          </SBox>
        );
      }

      if (visibility.track.error && !anyOffline) {
        return (
          <SBox flex={1}>
            <ViewLoadFailed variant="track" verticalOffset={2} />
          </SBox>
        );
      }

      return (
        <SBox width={1} flex={1} pt={55} position="relative">
          <Avatar animationY={animationY} />

          <TrackInfo />
          <TrackYoutube />

          {visibility.track.data ? (
            <>
              <LinearGradient
                colors={theme.gradients.trackMarkets}
                style={{
                  position: 'absolute',
                  left: 0,
                  right: 0,
                  top: 260,
                  height: 460,
                }}
                locations={[0, 0.19, 1]}
              />

              <SBox
                bg="ebonyClay"
                position="absolute"
                top={717}
                width={1}
                left={0}
                height={540}
              />
            </>
          ) : null}

          <TrackNmf />

          <TrackMarkets />

          <TrackCharts />

          <TrackPlaylists />
        </SBox>
      );
    },
    [visibility, visibilityCharts, visibilityMarkets, visibilityPlaylists]
  );

  const renderHeader: TRefreshableRenderer = ({
    animationY,
    scrollToTop,
    isScrolled,
  }) => {
    return (
      <Header
        animationY={animationY}
        scrollToTop={scrollToTop}
        isScrolled={isScrolled}
        track={track}
        starred={isStarred}
        toggleStarred={toggleStarred}
        routeParams={routeParams}
        // route={route}
        visibility={visibility}
        visibilityCharts={visibilityCharts}
        visibilityMarkets={visibilityMarkets}
        visibilityPlaylists={visibilityPlaylists}
        starredTracks={starred}
      />
    );
  };

  const renderFgLayer2 = () => <RotationOverlay />;

  const renderBgLayer2: TRefreshableRenderer = useCallback(() => {
    const anyOffline =
      _.path('offline', visibility) ||
      _.path('offline', visibilityCharts) ||
      _.path('offline', visibilityMarkets) ||
      _.path('offline', visibilityPlaylists);
    const image_url = _.path('data.image_url', track);
    // const isNotNmfEmpty = _.length(_.path('data.items', nmfData)) > 0;
    // const isNotHhEmpty = _.length(_.path('data.items', hhData)) > 0;

    if (anyOffline) {
      return null;
    }

    if (visibility.track.data) {
      return (
        <SBox position="relative" height={400}>
          {image_url ? (
            <SHeaderBg top={0} source={{ uri: image_url }} width={width} />
          ) : (
            <SBox
              height={375}
              width="100%"
              position="absolute"
              top={0}
              bg={theme.colors.lavenderGray}
            />
          )}

          <SHeaderGradient
            height={375}
            top={0}
            colors={theme.gradients.trackAvatar}
            location={[0, 0.54, 1]}
          />
          <SHeaderGradient
            height={146}
            top={0}
            colors={theme.gradients.trackAvatar2}
          />
          <SHeaderGradient
            top={273}
            height={102}
            colors={theme.gradients.trackShadow}
            location={[0, 0.2, 1]}
          />
        </SBox>
      );
    }
  }, [
    track,
    visibility,
    visibilityCharts,
    visibilityMarkets,
    visibilityPlaylists,
    nmfData,
    hhData,
  ]);

  return (
    <RefreshableView
      testID="track-refreshable-view"
      indicatorLight
      loading={refreshing}
      indicatorOffsetTop={maxHeight - 98}
      onPullDown={() => {
        if (!inited) {
          return;
        }
        refresh();
      }}
      renderHeader={renderHeader}
      renderBgLayer2={renderBgLayer2}
      renderFgLayer2={renderFgLayer2}
      renderBody={renderBody}
      withoutBottomTabNavigator
      name={ROUTES.track}
      withNativeDriver
    />
  );
});