import React, { useCallback } from 'react';
// import { NavigationScreenProp, withNavigation } from 'react-navigation';
// import { withNavigation } from '../hoc/with-navigation';
import { Button } from './button';
import { Figure } from './figure';
import { Router, tempParamsCache$ } from '../utils/navigation-service';
import { ROUTES_TAB } from '../../app/constants';
import { SNoStarredText } from '../s-components/s-no-starred-text';
import { SNoStarredTitle } from '../s-components/s-no-starred-title';

type TProps = {
  variant: string;
  // navigation: NavigationScreenProp<any>;
  verticalOffset: number;
};

const ViewNoStarredComponent: React.FC<TProps> = props => {
  const { verticalOffset, variant } = props;
  const goToSearch = (variant: string) => {
    tempParamsCache$.next({
      searchVariant: variant === 'starred-playlists' ? 'playlists' : 'tracks',
    });
    Router.jumpTo(ROUTES_TAB.search, {
      searchVariant: variant === 'starred-playlists' ? 'playlists' : 'tracks',
    });
  };

  const getVendorChartName = () => {
    return 'Spotify Top 200 and Apple Music Top 100';
  };

  const getNoStarredText = useCallback(() => {
    let noStarredText = null;
    const chartName = getVendorChartName();

    switch (variant) {
      case 'home':
        noStarredText = (
          <SNoStarredText>
            Search your favorite tracks{'\n'}
            to keep tabs of their movement on{'\n'}
            {chartName} Charts.
          </SNoStarredText>
        );
        break;
      case 'starred':
        noStarredText = (
          <SNoStarredText>
            Search and star your high-priority{'\n'}
            tracks to receive proactive{'\n'}
            updates on-the-go.
          </SNoStarredText>
        );
        break;
      case 'notifications':
        noStarredText = (
          <SNoStarredText>
            Search and star your most prioritized{'\n'}
            tracks and playlists or select the desired{'\n'}charts found in the
            notification settings{'\n'}to receive updates on-the-go.
          </SNoStarredText>
        );
        break;
      case 'starred-playlists':
        noStarredText = (
          <SNoStarredText>
            Search and star playlists{'\n'}
            to get notifications when tracklists{'\n'}
            are updated or starred tracks are added.
          </SNoStarredText>
        );
        break;
      case 'starred-tracks':
        noStarredText = (
          <SNoStarredText>
            Search and star tracks{'\n'}
            to get notifications when they&apos;re added{'\n'}
            to playlists, charts or change chart positions.
          </SNoStarredText>
        );
        break;

      default:
        noStarredText = null;
    }

    return noStarredText;
  }, [variant]);

  const getNoStarredTitle = useCallback(() => {
    let noStarredTitle = null;
    switch (variant) {
      case 'starred-tracks':
        noStarredTitle = (
          <SNoStarredTitle pb={11} mt={10}>
            Star your first track
          </SNoStarredTitle>
        );
        break;
      case 'starred-playlists':
        noStarredTitle = (
          <SNoStarredTitle pb={11} mt={10}>
            Star your first playlist
          </SNoStarredTitle>
        );
        break;
      case 'notifications':
        noStarredTitle = (
          <SNoStarredTitle pb={10} mt={10}>
            Get Started
          </SNoStarredTitle>
        );
        break;
      default:
        noStarredTitle = (
          <SNoStarredTitle pb={11} mt={10}>
            Star Your First Track
          </SNoStarredTitle>
        );
    }

    return noStarredTitle;
  }, [variant]);

  const buttonText = variant === 'starred-playlists' ? 'playlists' : 'tracks';

  return (
    <Figure
      variant="no-starred"
      fullscreen
      verticalOffset={verticalOffset}
      renderTitle={getNoStarredTitle}
      renderMessage={getNoStarredText}
      placeholderHeight={220}
      renderFooter={() => (
        <Button
          testID="view-no-starred-go-to-search-button"
          mt={28}
          onPress={() => {
            goToSearch(variant);
          }}
        >
          Search for {buttonText}
        </Button>
      )}
    />
  );
};

// export const ViewNoStarred = withNavigation(ViewNoStarredComponent);
export const ViewNoStarred = ViewNoStarredComponent;