import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
// import { TransitionSpecs } from '@react-navigation/stack';
// import {
//   createStackNavigator,
//   CardStyleInterpolators,
// } from '@react-navigation/stack';
import { addTrackRoutingFor, buildRouting } from './routing';
import { ROUTES } from '../constants';
import Marketselector from '../../market-selector/containers/market-selector';
import Playlistgraph from '../../playlist-performance/containers/graph-screen';
import Playlistsearch from '../../playlist-search/containers/playlist-search';
import Starred from '../../starred/containers/starred';
import Playlist from '../../playlist/containers/playlist';

const _ = ROUTES;
const Stack = createStackNavigator();

export const StarredStack = () => (
  <Stack.Navigator
    initialRouteName="Starred"
    screenOptions={{
      headerShown: false,
      // cardStyleInterpolator: Platform.OS == 'ios' ? CardStyleInterpolators.forHorizontalIOS : CardStyleInterpolators.forNoAnimation
      // cardStyleInterpolator: CardStyleInterpolators.forNoAnimation,
    }}
  >
    {/*<Stack.Screen name="Starred" component={Starred} options={{}} />*/}
    {buildRouting([
      [_.starred, Starred],
      ...addTrackRoutingFor(_.starred),
      [`${_.starred}${_.playlist}`, Playlist],
      ...addTrackRoutingFor(`${_.starred}${_.playlist}`),
      [`${_.starred}${_.playlist}${_.marketselector}`, Marketselector],
      ...addTrackRoutingFor(`${_.search}${_.marketselector}`),
      [`${_.starred}${_.playlist}${_.playlistgraph}`, Playlistgraph],
      [`${_.starred}${_.playlist}${_.playlistsearch}`, Playlistsearch],
      ...addTrackRoutingFor(`${_.starred}${_.playlist}${_.playlistsearch}`),
    ])}
  </Stack.Navigator>
);