// @flow
import React from 'react'
import {Platform, StyleSheet, Text} from 'react-native'
import {Row, Column} from '../../components/layout'
import {ListRow, Detail, Title} from '../../components/list'
import type {FancyBusTimeListType} from './types'
import type moment from 'moment'
import * as c from '../../components/colors'
import {ProgressChunk} from './components/progress-chunk'

const TIME_FORMAT = 'h:mma'

const styles = StyleSheet.create({
  skippingStopTitle: {
    color: c.iosDisabledText,
  },
  skippingStopDetail: {},
  internalPadding: {
    paddingVertical: Platform.OS === 'ios' ? 8 : 15,
  },
  atStopTitle: {
    fontWeight: Platform.OS === 'ios' ? '500' : '600',
  },
  passedStopTitle: {
    color: c.iosDisabledText,
  },
})

export class BusStopRow extends React.PureComponent {
  props: {
    time: moment,
    now: moment,
    barColor: string,
    currentStopColor: string,
    place: string,
    times: FancyBusTimeListType,
    isFirstRow: boolean,
    isLastRow: boolean,
  }

  render() {
    const {
      time,
      now,
      barColor,
      currentStopColor,
      place,
      times,
      isFirstRow,
      isLastRow,
    } = this.props

    const afterStop = time && now.isAfter(time, 'minute')
    const atStop = time && now.isSame(time, 'minute')
    const beforeStop = !afterStop && !atStop && time !== false
    const skippingStop = time === false

    return (
      <ListRow fullWidth={true} fullHeight={true}>
        <Row>
          <ProgressChunk
            {...{
              barColor,
              afterStop,
              beforeStop,
              atStop,
              skippingStop,
              currentStopColor,
            }}
            isFirstChunk={isFirstRow}
            isLastChunk={isLastRow}
          />

          <Column flex={1} style={styles.internalPadding}>
            <Title
              bold={false}
              style={[
                skippingStop && styles.skippingStopTitle,
                afterStop && styles.passedStopTitle,
                atStop && styles.atStopTitle,
              ]}
            >
              {place}
            </Title>
            <Detail lines={1}>
              <ScheduleTimes {...{times, skippingStop}} />
            </Detail>
          </Column>
        </Row>
      </ListRow>
    )
  }
}

class ScheduleTimes extends React.PureComponent {
  props: {
    skippingStop: boolean,
    times: FancyBusTimeListType,
  }

  render() {
    const {times, skippingStop} = this.props

    return (
      <Text style={skippingStop && styles.skippingStopDetail}>
        {times
          // and format the times
          .map(time => (time === false ? 'None' : time.format(TIME_FORMAT)))
          .join(' • ')}
      </Text>
    )
  }
}

@@ -1510,36 +1510,26 @@
     
-%7B...%7B%0A              
+barColor=%7B
 barColor
 ,%0A  
@@ -1520,25 +1520,25 @@
 or=%7BbarColor
-,
+%7D
 %0A           
@@ -1530,34 +1530,43 @@
 or%7D%0A            
-  
+afterStop=%7B
 afterStop,%0A     
@@ -1554,25 +1554,25 @@
 p=%7BafterStop
-,
+%7D
 %0A           
@@ -1572,18 +1572,28 @@
         
-  
+beforeStop=%7B
 beforeSt
@@ -1590,28 +1590,26 @@
 =%7BbeforeStop
-,%0A  
+%7D%0A
             
@@ -1610,28 +1610,34 @@
       atStop
-,%0A  
+=%7BatStop%7D%0A
             
@@ -1648,32 +1648,62 @@
 pingStop
-,%0A              
+=%7BskippingStop%7D%0A            currentStopColor=%7B
 currentS
@@ -1714,23 +1714,8 @@
 olor
-,%0A            %7D
 %7D%0A  
@@ -2223,19 +2223,21 @@
 mes 
-%7B...
+times=
 %7Btimes
-,
+%7D
  ski
@@ -2245,17 +2245,30 @@
 pingStop
-%7D
+=%7BskippingStop
 %7D /%3E%0A   

remove props spread in BusStopRow