import React, { useCallback } from 'react';
import { SBox } from '../s-components/layout/s-box';
import { Figure } from './figure';
import { setFigureOffset } from '../transducers';
import { SLoadFailedText } from '../s-components/s-load-failed-text';
import { SLoadFailedTitle } from '../s-components/s-load-failed-title';
import { SLoadFailedTitle2 } from '../s-components/s-load-failed-title2';
import { SLoadFailedTitle3 } from '../s-components/s-load-failed-title3';

type TProps = {
  variant?:
    | 'default'
    | 'search'
    | 'top-charts'
    | 'starred'
    | 'market'
    | 'markets'
    | 'notifications'
    | 'notifications-search'
    | 'notification-settings'
    | 'playlists'
    | 'charts'
    | 'track'
    | 'tracklist'
    | 'playlist'
    | 'starred-playlists'
    | 'starred-tracks'
    | 'track-playlists'
    | 'track-playlists-search'
    | 'track-playlists-tab'
    | 'nmf'
    | 'hh'
    | 'youtube-list'
    | 'youtube-video'
    | 'youtube-videos';
  market?: string;
  vendor?: string;
  addBottomIndents?: boolean;
  verticalOffset?: number;
  color?: string;
  figureVariant?: string;
  androidFigureOffset?: number;
  // maxHeight?: number;
  // minHeight?: number;
  activeTab?: string;
};

export const ViewLoadFailed: React.FC<TProps> = props => {
  const {
    verticalOffset,
    variant,
    addBottomIndents,
    androidFigureOffset,
    figureVariant,
    vendor,
    market,
    color,
    activeTab,
  } = props;
  const vOffset = setFigureOffset(verticalOffset!, androidFigureOffset);
  const noFigure =
    variant === 'search' ||
    variant === 'tracklist' ||
    variant === 'track-playlists-search' ||
    variant === 'notifications-search';

  const getNoLoadText = useCallback(() => {
    let noLoadText;

    switch (variant) {
      case 'playlists':
      case 'top-charts':
      case 'market':
      case 'starred-playlists':
        noLoadText = (
          <SLoadFailedText px={20} color={color}>
            We are experiencing some problems. {'\n'}
            Please try refreshing the page.
          </SLoadFailedText>
        );
        break;
      case 'search':
      case 'track-playlists-search':
      case 'notifications-search':
        noLoadText = null;
        break;
      case 'tracklist':
        noLoadText = (
          <SLoadFailedText px={20} color={color} semibold>
            Data failed to load.{'\n'}
            Try another search.
          </SLoadFailedText>
        );
        break;
      case 'charts':
        noLoadText = (
          <SLoadFailedText px={20} mb={10}>
            We are experiencing some problems. {'\n'}
            Please try refreshing the page.
          </SLoadFailedText>
        );
        break;
      default:
        noLoadText = (
          <SLoadFailedText px={20}>
            We are experiencing some problems. {'\n'}
            Please try refreshing the page.
          </SLoadFailedText>
        );
    }

    return noLoadText;
  }, [variant, color]);

  const getNoLoadTitle = useCallback(() => {
    const topCharts =
      vendor === 'apple' ? `Apple Music\n Top 100` : `Spotify Daily\n Top 200`;
    let noLoadTitle;
    const charts = vendor === 'apple' ? 'Apple Music' : 'Spotify';

    switch (variant) {
      case 'starred':
        noLoadTitle = (
          <SLoadFailedTitle pb={11} px={30} mt={10} textAlign="center">
            Failed to Load Starred Tracks
          </SLoadFailedTitle>
        );
        break;
      case 'playlists':
        noLoadTitle = (
          <SLoadFailedTitle2 pb={10} px={30} mt={4}>
            Failed to Load {vendor}
            {'\n'}
            Playlist Placements
          </SLoadFailedTitle2>
        );
        break;
      case 'track-playlists':
        noLoadTitle = (
          <SLoadFailedTitle pb={11} px={28} mt={4} ml={2} textAlign="center">
            Failed to load {vendor}
            {'\n'}
            Playlist Placements
          </SLoadFailedTitle>
        );
        break;
      case 'track-playlists-tab':
        noLoadTitle = (
          <SLoadFailedTitle pb={12} px={28} mt={5} ml={0} textAlign="center">
            Failed to load {activeTab}
            {'\n'}
            {vendor} Playlists
          </SLoadFailedTitle>
        );
        break;
      case 'top-charts':
        noLoadTitle = (
          <SLoadFailedTitle pb={11} px={30} mt={6} textAlign="center">
            Failed to load {topCharts} chart for {market}
          </SLoadFailedTitle>
        );
        break;
      case 'search':
      case 'track-playlists-search':
        noLoadTitle = (
          <SBox width={1}>
            <SLoadFailedTitle3 semibold>
              Data failed to load.{'\n'}Try another search.
            </SLoadFailedTitle3>
          </SBox>
        );
        break;
      case 'notifications-search':
        noLoadTitle = (
          <SBox width={1}>
            <SLoadFailedTitle3 semibold>
              Data failed to load.{'\n'}Try another filter.
            </SLoadFailedTitle3>
          </SBox>
        );
        break;
      case 'market':
        noLoadTitle = (
          <SLoadFailedTitle pb={11} mt={6} color={color}>
            Failed to load Markets
          </SLoadFailedTitle>
        );
        break;
      case 'charts':
        noLoadTitle = (
          <SLoadFailedTitle2
            pb={12}
            px={30}
            mt={5}
            textAlign="center"
            lineHeight="24px"
          >
            Failed to load {charts}
            {'\n'}
            Chart Placements
          </SLoadFailedTitle2>
        );
        break;
      case 'markets':
        noLoadTitle = (
          <SLoadFailedTitle pb={11} mt={6} color={color}>
            Failed to load Streams by Market
          </SLoadFailedTitle>
        );
        break;
      case 'track':
        noLoadTitle = (
          <SLoadFailedTitle pb={11} mt={6} color={color}>
            Failed to Load Track
          </SLoadFailedTitle>
        );
        break;
      case 'notifications':
        noLoadTitle = (
          <SLoadFailedTitle ml={1} pb={11} mt={6} color={color}>
            Failed to load Notifications
          </SLoadFailedTitle>
        );
        break;
      case 'notification-settings':
        noLoadTitle = (
          <SLoadFailedTitle ml={1} pb={11} mt={6} color={color}>
            Failed to load Notification Settings
          </SLoadFailedTitle>
        );
        break;
      case 'playlist':
        noLoadTitle = (
          <SLoadFailedTitle pb={10} mt={8} color={color}>
            Failed to load Playlist
          </SLoadFailedTitle>
        );
        break;
      case 'tracklist':
        noLoadTitle = null;
        break;
      case 'starred-playlists':
        noLoadTitle = (
          <SLoadFailedTitle pb={12} mt={4} color={color}>
            Failed to load Starred Playlists
          </SLoadFailedTitle>
        );
        break;
      case 'starred-tracks':
        noLoadTitle = (
          <SLoadFailedTitle pb={12} mt={4} color={color}>
            Failed to load Starred Tracks
          </SLoadFailedTitle>
        );
        break;
      case 'nmf':
        noLoadTitle = (
          <SLoadFailedTitle pb={12} mt={4} color={color}>
            Failed to load New Music Friday
          </SLoadFailedTitle>
        );
        break;
      case 'hh':
        noLoadTitle = (
          <SLoadFailedTitle pb={12} mt={4} color={color}>
            Failed to load Hot Hits
          </SLoadFailedTitle>
        );
        break;
      case 'youtube-list':
        noLoadTitle = (
          <SLoadFailedTitle pb={11} mt={6} color={color}>
            Failed to load Videos
          </SLoadFailedTitle>
        );
        break;
      case 'youtube-video':
        noLoadTitle = (
          <SLoadFailedTitle pb={11} mt={6} color={color}>
            Failed to load Video
          </SLoadFailedTitle>
        );
        break;
      case 'youtube-videos':
        noLoadTitle = (
          <SLoadFailedTitle pb={11} mt={6} color={color}>
            Failed to load Videos
          </SLoadFailedTitle>
        );
        break;
      default:
        noLoadTitle = (
          <SLoadFailedTitle pb={11} mt={10}>
            Failed to load the page
          </SLoadFailedTitle>
        );
    }

    return noLoadTitle;
  }, [variant, vendor, market, color, activeTab]);

  return (
    <Figure
      addBottomIndents={addBottomIndents}
      variant={noFigure ? undefined : figureVariant}
      verticalOffset={vOffset}
      renderTitle={getNoLoadTitle}
      renderMessage={getNoLoadText}
      placeholderHeight={220}
      placeholderBottomOffset={24}
    />
  );
};

ViewLoadFailed.defaultProps = {
  variant: 'default',
  addBottomIndents: false,
  verticalOffset: 0,
  color: 'white',
  figureVariant: 'load-failed',
};