import React, { memo, useCallback, useState } from 'react';
import { Dimensions, LayoutChangeEvent } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { RefreshableView } from '../../common/components/refreshable-view';
import { SBoxAnimated } from '../../common/s-components/layout/s-box-animated';
import { BOTTOM_TAB_HEIGHT, FETCH_TYPE } from '../../common/constants';
// import { SwipeableList } from '../../common/components/swipeable-list';
import { ViewLoadFailed } from '../../common/components/view-load-failed';
import { ViewNetworkFailed } from '../../common/components/view-network-failed';
import { SBox } from '../../common/s-components/layout/s-box';
import { addSafeArea } from '../../common/transducers';
// import { RefillingIndicator } from '../../common/components/refilling-indicator';
import { TGalleryCardData, TRoute } from '../types';
import {
  NEntityInfinite,
  TEntityVisibility,
  TRefreshableRenderer,
} from '../../common/types';
import { Header } from './header';
import { fp as _ } from '../../common/utils/fp';
import { ROUTE_PARAMS, ROUTES } from '../../app/constants';
import { Avatar } from './avatar';
import { Slider } from './section-slider';
import { HeaderBackground } from './header/header-background';
import { Tracklist } from '../../playlist-tracklist-core';
import { TTracklistExtended } from '../../playlist-tracklist-core/types';
import { TRACKLIST_VARIANT } from '../../playlist-tracklist-core/constants';
import { goToTrack } from '../services';
import { theme } from '../../app/theme';
import PlaylistPerformance from '../../playlist-performance/containers/playlist-performance';
import { RotationOverlay } from '../../common/components/rotation-overlay';
import { TracklistsCards } from './section-tracklists-cards';
// import { Cards } from './section-cards';
// import graph from '../../graph';

const maxHeight = addSafeArea(62);
const { height: DEVICE_HEIGHT } = Dimensions.get('window');

type TProps = {
  refreshing: boolean;
  refresh: () => void;
  playlistVisibility: TEntityVisibility;
  getTracklist: NEntityInfinite.TEntityInfiniteGet;
  tracklist: TTracklistExtended;
  tracklistVisibility: TEntityVisibility;
  galleryCardData: TGalleryCardData;
  toggleStarred: () => void;
  route: TRoute;
  offline: boolean;
};

export const Playlist: React.FC<TProps> = memo(props => {
  const {
    refreshing,
    refresh,
    getTracklist,
    toggleStarred,
    playlistVisibility,
    tracklistVisibility,
    tracklist,
    route,
    galleryCardData,
    offline,
  } = props;
  const [allowAnimation, setAllowAnimation] = useState(false);

  // Allow animation only if there is scroll space is more than double header height
  const getVisibleContentHeight = () => {
    return DEVICE_HEIGHT - BOTTOM_TAB_HEIGHT;
  };

  const renderHeader: TRefreshableRenderer = ({ animationY, scrollToTop }) => {
    return (
      <Header
        animationY={animationY}
        scrollToTop={scrollToTop}
        toggleStarred={toggleStarred}
      />
    );
  };

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

  const renderBgLayer = () => {
    return <HeaderBackground />;
  };

  const renderBody: TRefreshableRenderer = useCallback(
    ({ animationY }) => {
      const isPersonalized = _.path('personalized', galleryCardData[0]);
      const showPage =
        !offline &&
        !playlistVisibility.error &&
        !playlistVisibility.offline &&
        !tracklistVisibility.offline;

      const vendor = _.path(['params', ROUTE_PARAMS.playlistrootVendor], route);

      return (
        <>
          <SBoxAnimated
            position="relative"
            flex={1}
            pt={0}
            onLayout={(params: LayoutChangeEvent) => {
              const maxHeight = getVisibleContentHeight();
              const contentHeight = params.nativeEvent.layout.height;
              const animationActivate = contentHeight > maxHeight;

              if (allowAnimation !== animationActivate) {
                setAllowAnimation(animationActivate);
              }
            }}
          >
            {playlistVisibility.error ? (
              <ViewLoadFailed variant="playlist" verticalOffset={5} />
            ) : null}
            {offline ||
            playlistVisibility.offline ||
            tracklistVisibility.offline ? (
              <ViewNetworkFailed verticalOffset={34} />
            ) : null}
            {showPage ? (
              <>
                <SBox mb={42} pt={maxHeight} position="relative" zIndex={2}>
                  <Avatar animationY={animationY} />
                  {/*<Cards />*/}
                  {/*<Graph />*/}
                  <Slider />
                </SBox>
                <LinearGradient
                  colors={theme.gradients.trackMarkets}
                  style={{
                    position: 'absolute',
                    left: 0,
                    right: 0,
                    top: 248,
                    height: 565,
                  }}
                  locations={[0, 0.19, 1]}
                />
                <PlaylistPerformance />
                <TracklistsCards personalized={isPersonalized as boolean} />
                <Tracklist
                  testID="playlist-tracklist"
                  personalized={isPersonalized as boolean}
                  visibility={tracklistVisibility}
                  tracklist={tracklist}
                  vendor={vendor}
                  playlistVendor={vendor}
                  getTracklist={getTracklist}
                  variant={TRACKLIST_VARIANT.playlist}
                  onCardPress={goToTrack}
                />
              </>
            ) : null}
          </SBoxAnimated>
        </>
      );
    },
    [
      playlistVisibility,
      tracklistVisibility,
      tracklist,
      getTracklist,
      route,
      galleryCardData,
      offline,
    ]
  );

  return (
    <RefreshableView
      testID="playlist"
      loading={refreshing}
      indicatorLight
      // inifite pagination - get next page when we don't have payload
      onScrollReachBottom={() => getTracklist(null, FETCH_TYPE.refill)}
      onPullDown={() => {
        refresh();
      }}
      renderHeader={renderHeader}
      renderBody={renderBody}
      renderBgLayer={renderBgLayer}
      renderFgLayer2={renderFgLayer2}
      // inifite pagination - get next page when we don't have payload
      // onScrollReachBottom={() => getData('infinite')}
      // inifite pagination - get next page when we don't have payload
      // onScrollReachBottom={this.refilling}
      withoutBottomTabNavigator
      name={ROUTES.playlist}
      withNativeDriver
      indicatorOffsetTop={30}
    />
  );
});

// static navigationOptions = () => ({
//   title: 'Playlist',
//   header: null,
// });