const connectedRoute = connect(state => ({
  activePostcodeType: getActivePostcodeType(state),
  activePostcode: getActivePostcode(state),
  postcodePrimary: getPostcodePrimary(state),
  postcodeSecondary: getPostcodeSecondary(state),
  postcodeTertiary: getPostcodeTertiary(state),
  chosenTownsPrimary: getChosenTownsPrimary(state),
  chosenTownsSecondary: getChosenTownsSecondary(state),
  chosenTownsTertiary: getChosenTownsTertiary(state)
}), {
  setActiveLocation,
  setChosenTowns,
  fetchLocation,
  fetchFeed
}, ({
  postcodePrimary,
  postcodeSecondary,
  postcodeTertiary,
  chosenTownsPrimary,
  chosenTownsSecondary,
  chosenTownsTertiary
}, {
  setActiveLocation,
  setChosenTowns,
  fetchLocation,
  fetchFeed
}, {
  version,
  feedType,
  ...ownProps
}) => ({
  setInitialLocation ({ postcode, locations }) {
    const formattedUrlPostcode: string = postcode.replace(/ /g, '').toUpperCase()
    const formattedLocations: Array<string> = locations.split(',')
    const chosenTownsTable: ChosenTownsTable = {
      [POSTCODE_TYPES.PRIMARY]: chosenTownsPrimary,
      [POSTCODE_TYPES.SECONDARY]: chosenTownsSecondary,
      [POSTCODE_TYPES.TERTIARY]: chosenTownsTertiary
    }

    function switchToPostcode ({ type }: { type: string }): void {
      setChosenTowns({ chosenTowns: filterUnique([...formattedLocations, ...chosenTownsTable[type]]), type })
      fetchFeed({ postcode, locations: formattedLocations, version, type })
      setActiveLocation({ active: type })
    }

    function setNewPostcode ({ type }: { type: string }): void {
      setActiveLocation({ active: type })
      setChosenTowns({ chosenTowns: formattedLocations, type })
      fetchLocation({ postcode: formattedUrlPostcode, version, type })
      fetchFeed({ postcode: formattedUrlPostcode, locations: formattedLocations, version, type })
    }

    // If postcode in URL matches a saved one, switch to that and update locations
    switch (formattedUrlPostcode) {
      case postcodePrimary: return switchToPostcode({ type: POSTCODE_TYPES.PRIMARY })
      case postcodeSecondary: return switchToPostcode({ type: POSTCODE_TYPES.SECONDARY })
      case postcodeTertiary: return switchToPostcode({ type: POSTCODE_TYPES.TERTIARY })

      // Add the new postcode if there is room
      default:
        if (!postcodePrimary) setNewPostcode({ type: POSTCODE_TYPES.PRIMARY })
        else if (!postcodeSecondary) setNewPostcode({ type: POSTCODE_TYPES.SECONDARY })
        else if (!postcodeTertiary) setNewPostcode({ type: POSTCODE_TYPES.TERTIARY })
    }
  },
  version,
  ...ownProps
}))

const LiveFeedRoute = connectedRoute(LiveFeed)
const NewsFeedRoute = connectedRoute(NewsFeed)
const DiscoverFeedRoute = connectedRoute(DiscoverFeed)

export {
  LiveFeedRoute,
  NewsFeedRoute,
  DiscoverFeedRoute
}

export default function LiveFeedRoute ({ version, setInitialLocation }: Props): Element<typeof Route> {
  return (
    <Route
      exact
      path='/feed/:postcode/:locations'
      render={({ match: { params: { postcode, locations } } }) => (
          <Feed
            enableNewsItemControls
            enableMenu
            sideBarStickyHeight={77}
            postcode={postcode}
            locations={locations}
            version={version}
            setInitialLocation={() => setInitialLocation({ postcode, locations })}
            head={
              <CreatePost />
            }
          />
        )}
    />
  )
}

export default function FeedApp ({ version = '0-0-5' }: Props): Element<typeof VersionProvider> {
  return (
    <VersionProvider value={version}>
      <Header control sticky />
      <LiveFeedRoute version={version} />
      <NewsFeedRoute version={version} />
      <DiscoverFeedRoute version={version} />
      <Footer />
      <Modal />
      <Drawer />
      <Notification />
    </VersionProvider>
  )
}

hydrate((
  <BrowserRouter>
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </BrowserRouter>
), document.getElementById('root'))