import React, { memo, useCallback, useContext } from 'react';
import { Undefinable } from 'tsdef';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SwipeableList } from '../../../common/components/swipeable-list';
import { RefillingIndicator } from '../../../common/components/refilling-indicator';
import { SRow } from '../../../common/s-components/layout/s-row';
import { Icon } from '../../../common/components/icon';
import { theme } from '../../../app/theme';
import { SearchInput } from '../../../common/components/search-input';
import { ToggleStyled } from '../../../common/components/toggle-styled';
import { NEntityInfinite, TTrackParams, TVendor } from '../../../common/types';
import { togglePopup } from '../../../common/utils/swipeable-popup-service';
import { SortPopup } from './sort-popup';
import { SortBlock } from '../sort-block';
import {
  DATE_RANGES,
  EStarSourcePages,
  FETCH_TYPE,
} from '../../../common/constants';
import { SkeletonSorting } from './skeleton-sorting';
import { Router } from '../../../common/utils/navigation-service';
import { ROUTES } from '../../../app/constants';
import { ContextStarred } from '../../../common/context';
import { fp as _ } from '../../../common/utils/fp';
import {
  SORTING_OPTIONS,
  POPUP_PLAYLIST_PLASEMENT_SORT_ID,
  TRACKLIST_VARIANT,
  POPUP_PLAYLIST_SORT_ID,
} from '../../constants';
import { TTracklistExtended, TTracklistVariant } from '../../types';

type TProps = {
  tracklist: TTracklistExtended;
  playlistVendor: TVendor;
  highlightedIsrc: Undefinable<string>;
  personalized?: boolean;
  getTracklist: NEntityInfinite.TEntityInfiniteGet;
  variant: TTracklistVariant;
  onCardPress: (params: TTrackParams) => void;
};

export const Tracklist: React.FC<TProps> = memo(props => {
  const starred = useContext(ContextStarred);
  const {
    tracklist,
    highlightedIsrc,
    getTracklist,
    variant,
    onCardPress,
    playlistVendor,
  } = props;
  const goToSearch = useCallback(() => {
    Router.goTo(
      variant === TRACKLIST_VARIANT.playlistPlacement
        ? ROUTES.playlistplacementsearch
        : ROUTES.playlistsearch,
      { modal: true }
    );
    // replaceStack('Playlistplacementsearch');
  }, []);

  const { data, loadingVariant } = tracklist || {};
  const isSorting = loadingVariant === FETCH_TYPE.sort;
  const composedKey = ['current_position', 'isrc', 'id'];
  const sortId =
    variant === TRACKLIST_VARIANT.playlistPlacement
      ? POPUP_PLAYLIST_PLASEMENT_SORT_ID
      : POPUP_PLAYLIST_SORT_ID;

  return (
    <>
      <SortPopup
        data={tracklist}
        getTracklist={getTracklist}
        sortId={sortId}
        variant={variant}
      />
      <SBox pb={64} position="relative">
        <SRow justifyContent="space-between" px={16} mb={17}>
          <SBox
            flexGrow={1}
            flexBasis="auto"
            onStartShouldSetResponderCapture={() => true}
            // onResponderGrant={() => {
            //   console.tron.log('click start');
            // }}
            onResponderRelease={goToSearch}
            // onResponderTerminate={() => {
            //   // click failed probably because someone decided starting moving
            //   console.tron.log('terminate');
            // }}
            // onResponderTerminationRequest={() => {
            //   // Don't allow any other object take this event
            //   return false;
            // }}
          >
            <SearchInput
              value={null}
              placeholder="Find a track"
              onChange={() => {}}
              disabled
              // onFocus={e => {
              //   e.preventDefault();
              // }}
              // searchLoading={visibility.searchLoading}
              // isScrolled={isScrolled}
              // onFocusBeforeScroll={isScrolled && scrollToTop}
              // onFocus={() => {}}
              // onChange={text => {
              //   change(text);
              //   setTimeout(() => {
              //     scrollToTop(true);
              //   }, 100);
              // }}
            />
          </SBox>

          <ToggleStyled
            testID="playlist-placemnet-tracklist-toggle"
            tappedCss={{ opacity: 0.7 }}
            defaultCss={{ opacity: 1 }}
            onPress={() => {
              togglePopup(sortId);
            }}
          >
            <SBox pl={14}>
              <Icon
                name="sort-2"
                color={theme.colors.white}
                size={30}
                mr={7}
                mt={6}
              />
            </SBox>
          </ToggleStyled>
        </SRow>

        <SortBlock
          value={_.path('config.orderBy', tracklist)}
          options={SORTING_OPTIONS}
          dateRange={DATE_RANGES.WEEK}
          playlistVendor={playlistVendor}
          activeOption={_.path('config.orderBy', tracklist)}
        />

        <SwipeableList
          testID="playlist-placement-swipeable-list"
          pageVariant="playlist-placement"
          cards={data || []}
          composedKey={composedKey}
          onPress={onCardPress}
          onPressRight={starred.toggleStarred}
          virtualCardHeight={136}
          highlightedIsrc={highlightedIsrc}
          starSource={
            variant === 'playlist'
              ? EStarSourcePages.Playlistpage
              : EStarSourcePages.Playlistplacement
          }
        />
        {isSorting ? <SkeletonSorting /> : null}
        {loadingVariant === FETCH_TYPE.refill ? (
          <RefillingIndicator position="absolute" bottom={0} left={0} />
        ) : null}
      </SBox>
    </>
  );
});