import * as df from 'date-fns'
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'

import { colors } from '../Colors'
import { DateData, sumDateData } from '../DateData'
import { TextStyles } from '../Styles'
import { formatCountShort } from '../util'
import { parseDateString } from '../util/date'
import { Bone } from './Bone'
import { PercentPill } from './PercentPill'
import { BarFigure } from './figures/BarFigure'

interface RowData {
  label: string
  interval: Interval
  maxIntervalStreams: DateData<number | null>[]
  currentIntervalStreams: DateData<number | null>[]
  changePercentage?: number
}

const styles = StyleSheet.create({
  text: { ...TextStyles.tiny, ...{ color: colors.metals.metal0 } },
})

/**
 * Row representing streams/views for a particular interval
 */
export const EntityStreamsIntervalTableRow: React.FC<RowData> = ({
  label,
  interval,
  maxIntervalStreams,
  currentIntervalStreams,
  changePercentage,
}) => (
  <View
    style={[
      {
        flexDirection: 'row',
        flex: 1,
        alignItems: 'center',
      },
    ]}
  >
    <View style={{ flexDirection: 'row', width: '50%', alignItems: 'center' }}>
      <View style={{ flex: 1, flexBasis: 0 }}>
        <Text style={styles.text}>{label}</Text>
      </View>
      <View
        style={{
          flex: 1,
          flexBasis: 0,
          alignItems: 'flex-end',
        }}
      >
        <BarFigure
          data={maxIntervalStreams}
          style={{ height: 14, width: 100 }}
          barStyle={(i, item) => ({
            minHeight: 1,
            fill: df.isWithinInterval(parseDateString(item.date), interval)
              ? colors.offWhite
              : colors.metals.metal2,
          })}
          barWidth={1}
          valueExtractor={(item) => item.data ?? 0}
          statusExtractor={() => 'full'} // Don't display "x" in this tiny graph
        />
      </View>
    </View>
    <View style={{ flexDirection: 'row', width: '50%', alignItems: 'center' }}>
      <View style={{ flex: 1, flexBasis: 0, alignItems: 'flex-end' }}>
        <Text style={styles.text}>
          {formatCountShort(sumDateData(currentIntervalStreams))}
        </Text>
      </View>
      <View
        style={{
          flex: 1,
          flexBasis: 0,
          alignItems: 'flex-end',
          justifyContent: 'flex-end',
        }}
      >
        {changePercentage != null && (
          <PercentPill percentage={changePercentage} size="small" />
        )}
      </View>
    </View>
  </View>
)

export const EntityStreamsIntervalTableRowSkeleton: React.FC<object> = () => {
  return (
    <View
      style={{
        flexDirection: 'row',
        flex: 1,
      }}
    >
      <View
        style={{
          flex: 1,
          flexDirection: 'row',
          justifyContent: 'space-between',
        }}
      >
        <Bone style={{ width: 22, height: 14 }} />
        <Bone style={{ width: 100, height: 14 }} />
        <Bone style={{ width: 45, height: 14 }} />
        <Bone style={{ width: 45, height: 14 }} />
      </View>
    </View>
  )
}