// @flow
import React from 'react'
import {View} from 'react-native'
import {connect} from 'react-redux'
import type {TopLevelViewPropsType} from '../../types'
import type momentT from 'moment'
import type {MenuItemType, MasterCorIconMapType, StationMenuType} from '../types'
import type {FilterType} from '../../components/filter'
import groupBy from 'lodash/groupBy'
import sortBy from 'lodash/sortBy'
import fromPairs from 'lodash/fromPairs'
import filter from 'lodash/filter'
import {MenuListView} from './menu'

type FancyMenuPropsType = TopLevelViewPropsType & {
  now: momentT,
  name: string,
  filters: FilterType[],
  foodItems: MenuItemType[],
  menuLabel?: string,
  menuCorIcons: MasterCorIconMapType,
  stationMenus: StationMenuType[],
};

class FancyMenuView extends React.Component {
  props: FancyMenuPropsType;

  render() {
    const {
      foodItems,
      stationMenus,
    } = this.props

    const stationNotes = fromPairs(stationMenus.map(m => [m.label, m.note]))
    const stationsSort = stationMenus.map(m => m.label)

    // only show items that the menu lists today
    const filtered = filter(foodItems, item => stationsSort.includes(item.station))
    // sort the remaining items by station
    const sortedByStation = sortBy(filtered, item => stationsSort.indexOf(item.station))
    // group them for the ListView
    const grouped = groupBy(sortedByStation, item => item.station)

    return (
      <View style={{flex: 1}}>
        <MenuListView data={grouped} stationNotes={stationNotes} badgeSpecials />
      </View>
    )
  }
}

function mapStateToProps(state, actualProps: FancyMenuPropsType) {
  return {
    filters: state.menus[actualProps.name] || [],
  }
}

export const FancyMenu = connect(mapStateToProps)(FancyMenuView)

@@ -469,24 +469,53 @@
 ash/filter'%0A
+import map from 'lodash/map'%0A
 import %7BMenu
@@ -822,16 +822,1562 @@
 onent %7B%0A
+  componentWillMount() %7B%0A    let %7BmenuCorIcons, filters, stationMenus%7D = this.props%0A%0A    // prevent ourselves from overwriting the filters from redux on mount%0A    if (filters.length) %7B%0A      return%0A    %7D%0A%0A    let stations = stationMenus.map(m =%3E m.label)%0A    filters = this.buildFilters(%7Bstations, corIcons: menuCorIcons%7D)%0A    this.props.onFiltersChange(filters)%0A  %7D%0A%0A  buildFilters(%7Bstations, corIcons%7D: %7Bstations: string%5B%5D, corIcons: MasterCorIconMapType%7D): FilterType%5B%5D %7B%0A    // Grab the labels of the COR icons%0A    let allDietaryRestrictions = map(corIcons, item =%3E item.label)%0A%0A    return %5B%0A      %7B%0A        type: 'toggle',%0A        key: 'specials',%0A        enabled: true,%0A        spec: %7B%0A          label: 'Only Show Specials',%0A          caption: 'Allows you to either see only the %22specials%22 for today, or everything the location has to offer (e.g., condiments.)',%0A        %7D,%0A        apply: %7B%0A          key: 'special',%0A        %7D,%0A      %7D,%0A      %7B%0A        type: 'list',%0A        key: 'stations',%0A        enabled: false,%0A        spec: %7B%0A          title: 'Stations',%0A          options: stations,%0A          mode: 'OR',%0A          selected: stations,%0A        %7D,%0A        apply: %7B%0A          key: 'station',%0A        %7D,%0A      %7D,%0A      %7B%0A        type: 'list',%0A        key: 'dietary-restrictions',%0A        enabled: false,%0A        spec: %7B%0A          title: 'Dietary Restrictions',%0A          options: allDietaryRestrictions,%0A          mode: 'AND',%0A          selected: %5B%5D,%0A        %7D,%0A        apply: %7B%0A          key: 'cor_icon',%0A        %7D,%0A      %7D,%0A    %5D%0A  %7D%0A%0A
   props:

add a function to build filters for FancyMenu