import React, { ReactComponentElement } from 'react';
// import {
//   NavigationRouteConfig,
//   // NavigationScreenConfig,
//   NavigationScreenProp,
//   NavigationScreenConfigProps,
// } from 'react-navigation';
// import { NavigationStackOptions } from 'react-navigation-stack';
import {
  createStackNavigator,
  TransitionPresets,
} from '@react-navigation/stack';
import { fp as _ } from '../../common/utils/fp';
import Track from '../../track/containers/track';
import Playlists from '../../playlists/containers/playlists';
import GraphScreen from '../../market-streams/containers/graph-screen';
import ChartsList from '../../track-charts-screen/containers/track-charts-screen';
import Market from '../../market';
import Marketselector from '../../market-selector';
import Markets from '../../markets';
import TrackEmpty from '../../track-error/containers/track-empty';
import TrackUnavailable from '../../track-error/containers/track-unavailable';
import MarketsGraph from '../../markets-streams/containers/graph-screen';
import Playlistplacement from '../../playlist-placement/containers/playlist-placement';
import PlaylistplacementSearch from '../../playlist-placement-search/containers/playlist-placement-search';
import Nmf from '../../nmf/containers/nmf';
import { ROUTE_PARAMS, ROUTES } from '../constants';
import { isLastRouteInCamel } from '../../common/transducers';
import Youtubelist from '../../youtube-list/containers';
import Youtube from '../../youtube/containers';
import YoutubePerformance from '../../youtube-performance/containers/graph-screen';
import Tiktok from '../../tiktok/containers';
import TiktokKpi from '../../tiktok-kpi/containers/graph-screen';
import NotificationsSettings from '../../notification-settings/containers/notification-settings';
import { NotificationSettingsDetails } from '../../notification-settings/components/notification-settings-details';

export const PATH = {
  [ROUTES.home]: `home/:${ROUTE_PARAMS.homeVendor}/:${ROUTE_PARAMS.homeMarket}`,
  [ROUTES.starred]: `starred/:${ROUTE_PARAMS.starredVariant}`,
  [ROUTES.search]: `search/:${ROUTE_PARAMS.searchVariant}`,
  [ROUTES.notifications]: `notifications`,
  [ROUTES.profile]: `profile`,
  [ROUTES.track]: `tracks/:${ROUTE_PARAMS.vendor}/:${ROUTE_PARAMS.isrc}/:${
    ROUTE_PARAMS.trackId
  }`,
  [ROUTES.youtubegraph]: `youtubуgraph`,

  [ROUTES.youtubelist]: `youtubelist/:${ROUTE_PARAMS.youtubeVideoId}/:${
    ROUTE_PARAMS.youtubeVariant
  }`,
  [ROUTES.tiktokgraph]: `tiktokgraph`,
  [ROUTES.emptytrack]: `tracks/empty`,
  [ROUTES.unavailabletrack]: `tracks/unavailable`,
  [ROUTES.market]: `market/:${ROUTE_PARAMS.marketCode}`,
  [ROUTES.markets]: `markets/:${ROUTE_PARAMS.marketTab}`,
  [ROUTES.marketselector]: `marketselector/:${ROUTE_PARAMS.marketVariant}`,
  [ROUTES.graph]: `graph/:${ROUTE_PARAMS.graphType}`,
  [ROUTES.graphmulti]: `graphmulti/:${ROUTE_PARAMS.graphmultiType}`,
  [ROUTES.playlists]: `playlists/:${ROUTE_PARAMS.provider}`,
  [ROUTES.playlists]: `playlists/:${ROUTE_PARAMS.playlistsVendor}`,
  [ROUTES.chartlists]: `chartlists/:${ROUTE_PARAMS.provider}`,
  [ROUTES.homelist]: `homelist/:${ROUTE_PARAMS.type}`,
  [ROUTES.charts]: `charts/:${ROUTE_PARAMS.cvendor}`,
  [ROUTES.playlistplacement]: `playlistplacement/:${ROUTE_PARAMS.playlistId}/:${
    ROUTE_PARAMS.playlistMarket
  }/:${ROUTE_PARAMS.playlistVendor}`,
  [ROUTES.playlistplacementsearch]: `playlistplacementsearch`,
  [ROUTES.notificationsettings]: `notificationsettings`,
  [ROUTES.playlist]: `playlist/:${ROUTE_PARAMS.playlistrootId}/:${
    ROUTE_PARAMS.playlistrootVendor
  }/:${ROUTE_PARAMS.playlistrootMarket}`,
  [ROUTES.playlistsearch]: `playlistsearch`,
  [ROUTES.playlistgraph]: `playlistgraph/:${ROUTE_PARAMS.playlistrootGraph}`,
  [ROUTES.playlistgraph]: `playlistgraph/:${ROUTE_PARAMS.playlistrootGraph}`,
  [ROUTES.nmf]: `nmf/:${ROUTE_PARAMS.nmfPageVariant}`,
  [ROUTES.hh]: `hh/:${ROUTE_PARAMS.nmfPageVariant}`,
};

export const getPathByCamelCase = _.compose(
  _.slice(0, -1),
  _.reduce<keyof typeof PATH, string>(
    (acc, n: keyof typeof PATH) => `${acc}${PATH[n]}/`,
    ''
  ),
  _.map(_.upperFirst),
  _.split('-'),
  _.kebabCase
);

const Stack = createStackNavigator();

export const buildRouting = _.compose(
  _.map(([camelRouteName, Screen]) => (
    <Stack.Screen
      key={camelRouteName}
      name={camelRouteName}
      // @ts-ignore
      path={getPathByCamelCase(camelRouteName)}
      component={Screen}
      options={({ route }) => {
        return {
          animationEnabled:
            !_.path('params.noAnimation', route) &&
            !_.find(
              routeSegment => {
                return isLastRouteInCamel(routeSegment, {
                  routeName: route.name,
                });
              },
              [ROUTES.graph, ROUTES.graphmulti, ROUTES.playlistgraph]
            ),
          ...(_.find(
            routeSegment => {
              return isLastRouteInCamel(routeSegment, {
                routeName: route.name,
              });
            },
            [ROUTES.playlistplacementsearch, ROUTES.playlistsearch]
          )
            ? TransitionPresets.ModalSlideFromBottomIOS
            : TransitionPresets.DefaultTransition),
        };
      }}
    />
  ))
);

export const addTrackRoutingFor = (
  parent: string
): [string, ReactComponentElement<any>][] => {
  const _ = ROUTES;
  return [
    // each camel case means parent route
    // e.g. HomeTrack means that we are on the child screen 'Track' and it is a child of 'Home'
    // e.g. StarredTrackMarketGraph means that we are on the child screen 'Graph' and it is a child of 'Market' and 'Market' is the child stack from 'Track' and so on
    [`${parent}${_.emptytrack}`, TrackEmpty],
    [`${parent}${_.unavailabletrack}`, TrackUnavailable],
    [`${parent}${_.track}`, Track],
    [`${parent}${_.track}${_.youtubelist}`, Youtubelist],
    [`${parent}${_.track}${_.youtubelist}${_.youtube}`, Youtube],
    [
      `${parent}${_.track}${_.youtubelist}${_.youtube}${_.marketselector}`,
      Marketselector,
    ],
    [
      `${parent}${_.track}${_.youtubelist}${_.youtube}${_.youtubegraph}`,
      YoutubePerformance,
    ],

    [`${parent}${_.track}${_.tiktok}`, Tiktok],
    [`${parent}${_.track}${_.tiktok}${_.marketselector}`, Marketselector],
    [`${parent}${_.track}${_.tiktok}${_.tiktokgraph}`, TiktokKpi],

    [`${parent}${_.track}${_.nmf}`, Nmf],
    [`${parent}${_.track}${_.hh}`, Nmf],
    [`${parent}${_.track}${_.nmf}${_.playlistplacement}`, Playlistplacement],
    [`${parent}${_.track}${_.hh}${_.playlistplacement}`, Playlistplacement],
    [
      `${parent}${_.track}${_.hh}${_.playlistplacement}${
        _.playlistplacementsearch
      }`,
      PlaylistplacementSearch,
    ],
    [
      `${parent}${_.track}${_.nmf}${_.playlistplacement}${
        _.playlistplacementsearch
      }`,
      PlaylistplacementSearch,
    ],
    [`${parent}${_.track}${_.market}`, Market],
    [`${parent}${_.track}${_.market}${_.graph}`, GraphScreen],
    [`${parent}${_.track}${_.market}${_.marketselector}`, Marketselector],
    [`${parent}${_.track}${_.marketselector}`, Marketselector],
    [`${parent}${_.track}${_.markets}`, Markets],
    [`${parent}${_.track}${_.markets}${_.graphmulti}`, MarketsGraph],
    [`${parent}${_.track}${_.markets}${_.market}`, Market],
    [`${parent}${_.track}${_.markets}${_.market}${_.graph}`, GraphScreen],
    [
      `${parent}${_.track}${_.markets}${_.market}${_.marketselector}`,
      Marketselector,
    ],
    [`${parent}${_.track}${_.chartlists}`, ChartsList],
    [`${parent}${_.track}${_.playlistplacement}`, Playlistplacement],
    [
      `${parent}${_.track}${_.playlistplacement}${_.playlistplacementsearch}`,
      PlaylistplacementSearch,
    ],
    [`${parent}${_.track}${_.playlists}`, Playlists],
    [
      `${parent}${_.track}${_.playlists}${_.playlistplacement}`,
      Playlistplacement,
    ],
    [
      `${parent}${_.track}${_.playlists}${_.playlistplacement}${
        _.playlistplacementsearch
      }`,
      PlaylistplacementSearch,
    ],
  ];
};

export const addNotificationSettingsRoutingFor = (
  parent: string
): [string, ReactComponentElement<any>][] => {
  const _ = ROUTES;
  return [
    // each camel case means parent route
    // e.g. HomeTrack means that we are on the child screen 'Track' and it is a child of 'Home'
    // e.g. StarredTrackMarketGraph means that we are on the child screen 'Graph' and it is a child of 'Market' and 'Market' is the child stack from 'Track' and so on
    [`${parent}${_.notificationsettings}`, NotificationsSettings],
    [`${parent}${_.notificationsettings}${_.marketselector}`, Marketselector],
    [
      `${parent}${_.notificationsettings}${_.notificationsettingsdetails}`,
      NotificationSettingsDetails,
    ],
  ];
};