/**
 * @flow
 *
 * <ScheduleTable/> renders the table of schedules.
 */

import React from 'react'
import {View, StyleSheet} from 'react-native'
import {Card} from '../../components/card'
import moment from 'moment-timezone'
import type {NamedBuildingScheduleType} from '../types'
import {isScheduleOpenAtMoment, getDayOfWeek} from '../lib'
import {ScheduleRow} from './schedule-row'

export class ScheduleTable extends React.PureComponent {
  props: {
    now: moment,
    schedules: NamedBuildingScheduleType[],
    onProblemReport: () => any,
  }

  render() {
    const {now, schedules} = this.props
    const dayOfWeek = getDayOfWeek(now)

    return (
      <View>
        {schedules.map(schedule =>
          <Card
            key={schedule.title}
            style={styles.scheduleContainer}
            header={schedule.title}
            footer={schedule.notes}
          >
            {schedule.hours.map((set, i) =>
              <ScheduleRow
                key={i}
                now={now}
                set={set}
                isActive={
                  schedule.isPhysicallyOpen !== false &&
                  set.days.includes(dayOfWeek) &&
                  isScheduleOpenAtMoment(set, now)
                }
              />,
            )}
          </Card>,
        )}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  scheduleContainer: {
    marginBottom: 20,
  },
})

@@ -1,75 +1,12 @@
 /
-**%0A *
+/
  @flow
-%0A *%0A * %3CScheduleTable/%3E renders the table of schedules.%0A */
 %0A%0Aim
@@ -37,16 +37,24 @@
 import %7B
+Button, 
 View, St
@@ -527,16 +527,33 @@
 chedules
+, onProblemReport
 %7D = this
@@ -1247,24 +1247,163 @@
 ,%0A        )%7D
+%0A%0A        %3CButton%0A          style=%7B%7BmarginHorizontal: 10%7D%7D%0A          title=%22Suggest an Edit%22%0A          onPress=%7BonProblemReport%7D%0A        /%3E
 %0A      %3C/Vie

enable problem reporting on android