import React from 'react'
import { StyleProp, View, ViewStyle } from 'react-native'
import { colors } from '../Colors'
import { StreamsByDateResult } from '../hooks/useEntityStreams'
import { notEmpty } from '../util'
import { EntityReleaseToDateStreams } from './EntityReleaseToDateStreams'
import { EntityStreamsIntervalTableRows } from './EntityStreamsIntervalTable'

export const EntityStreamsTableRow: React.FC<{ index: number }> = ({
  index,
  children,
}) => {
  return (
    <View
      style={[
        {
          height: 48,
          paddingHorizontal: 8,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        },
        index !== 0 ? { borderTopWidth: 1, borderColor: colors.gray } : null,
      ]}
    >
      {children}
    </View>
  )
}

/**
 *
 * Combined release-to-date streams and streams interval rows
 */
export const EntityStreamsTable: React.FC<{
  entityId: string
  countryCode: string
  useEntityStreams: (interval: Interval) => StreamsByDateResult
  releaseDate?: string
  style?: StyleProp<ViewStyle>
}> = ({ entityId, countryCode, useEntityStreams, releaseDate, style }) => {
  const rows = [
    releaseDate != null ? (
      <EntityReleaseToDateStreams
        useEntityStreams={(interval: Interval) => useEntityStreams(interval)}
        releaseDate={releaseDate}
      />
    ) : null,
    ...EntityStreamsIntervalTableRows({
      entityId,
      countryCode,
      useEntityStreams,
    }),
  ].filter(notEmpty)

  return (
    <View style={[style]}>
      {rows.map((row, i) => (
        <EntityStreamsTableRow key={i} index={i}>
          {row}
        </EntityStreamsTableRow>
      ))}
    </View>
  )
}