import React, { memo, useCallback } from 'react';
import { Platform } from 'react-native';
import { RefreshableView } from '../../common/components/refreshable-view';
import { theme } from '../../app/theme';
import { ViewLoadFailed } from '../../common/components/view-load-failed';
import { ViewNetworkFailed } from '../../common/components/view-network-failed';
import { Skeleton } from './skeleton';
import { SBox } from '../../common/s-components/layout/s-box';
import { addSafeArea } from '../../common/transducers';
import { TActiveVisibilityConfig } from '../types';
import { TMarketUndef, TRefreshableRenderer } from '../../common/types';
import { ROUTES } from '../../app/constants';
import { STARRED_VARIANT } from '../constants';
import { Header } from './header';
import { Tracks } from './tab-tracks/tracks';
import { Playlists } from './tab-playlists/playlists';
import { Icon } from '../../common/components/icon';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { SRow } from '../../common/s-components/layout/s-row';
import { ViewNoStarred } from '../../common/components/view-no-starred';
import { RefillingIndicator } from '../../common/components/refilling-indicator';
import { StarredBg } from './starred-bg';

const isIOS = Platform.OS === 'ios';

const maxHeight = addSafeArea(133);

type TProps = {
  refreshing: boolean;
  refresh: () => void;
  activeVisibility: TActiveVisibilityConfig;
  // toggleStarred: TToggleStarred;
  market: TMarketUndef;
  getData: () => void;
};

export const Starred: React.FC<TProps> = memo(props => {
  const { refreshing, refresh, activeVisibility, getData, market } = props;
  const { visibility } = activeVisibility;

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

  const renderBody: TRefreshableRenderer = useCallback(() => {
    const { visibility, variant } = activeVisibility;
    const verticalOffsetNoStarred = isIOS ? -20 : -40;
    const verticalOffsetError = isIOS ? 62 : 30;
    const verticalOffsetOffline = isIOS ? 66 : -30;
    const tabHeading =
      variant === STARRED_VARIANT.tracks
        ? '7-day period streams'
        : 'Recently Starred';

    return (
      <>
        <SBox position="relative" flex={1} pt={maxHeight} pb={32}>
          {visibility.skeleton && <Skeleton />}
          {visibility.error && (
            <ViewLoadFailed
              variant={
                variant === STARRED_VARIANT.tracks
                  ? 'starred-tracks'
                  : 'starred-playlists'
              }
              verticalOffset={verticalOffsetError}
            />
          )}
          {visibility.empty ? (
            <ViewNoStarred
              verticalOffset={verticalOffsetNoStarred}
              variant={
                variant === STARRED_VARIANT.tracks
                  ? 'starred-tracks'
                  : 'starred-playlists'
              }
            />
          ) : null}
          {visibility.offline && (
            <ViewNetworkFailed verticalOffset={verticalOffsetOffline} />
          )}
          {visibility.data ? (
            <>
              <SRow mt={13} mb={6} px={16} alignItems="center">
                <Icon
                  name="sort"
                  color={theme.colors.periwinkleGray}
                  size={12}
                  mr={8}
                  mt={-1}
                />
                <SH6 color={theme.colors.periwinkleGray}>{tabHeading}</SH6>
              </SRow>
              <SBox position="absolute" zIndex={-1} top={maxHeight + 58}>
                <StarredBg />
              </SBox>
            </>
          ) : null}
          {variant === STARRED_VARIANT.tracks && visibility.data && <Tracks />}
          {variant === STARRED_VARIANT.playlists && visibility.data && (
            <Playlists />
          )}

          {visibility.extra.refill ? <RefillingIndicator /> : null}
        </SBox>
      </>
    );
  }, [activeVisibility]);

  return (
    <RefreshableView
      testID="starred-refreshable-view"
      loading={refreshing}
      indicatorOffsetTop={maxHeight}
      // inifite pagination - get next page when we don't have payload
      onScrollReachBottom={() => {
        return (
          !visibility.skeleton &&
          !visibility.extra.refill &&
          visibility.data &&
          getData()
        );
      }}
      onPullDown={() =>
        !visibility.skeleton && !visibility.extra.refill && refresh()
      }
      renderHeader={renderHeader}
      renderBody={renderBody}
      name={ROUTES.starred}
      withNativeDriver
    />
  );
});

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