import React from 'react'
import { View } from 'react-native'

import { colors } from '../Colors'
import {
  StreamsByDateResult,
  useEntityStreamsSummary,
} from '../hooks/useEntityStreams'
import {
  oldGraphTimeIntervals,
  TimeInterval,
  timeIntervalOptions,
} from '../types/TimeInterval'
import { timeRangeInterval } from '../util'
import { parseDateString } from '../util/date'
import { EntityReleaseToDateStreams } from './EntityReleaseToDateStreams'
import {
  EntityStreamsIntervalTableRow,
  EntityStreamsIntervalTableRowSkeleton,
} 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.metals.metal1 }
          : null,
      ]}
    >
      {children}
    </View>
  )
}

export const TimeIntervalTableRows: React.FC<{
  useEntityStreams: (interval: Interval) => StreamsByDateResult
}> = ({ useEntityStreams }) => {
  const useIntervalToIntervalStreams = (timeInterval: {
    value: TimeInterval
    labelShort: string
  }) => {
    const currentInterval = timeRangeInterval(timeInterval.value)

    const summary = useEntityStreamsSummary(
      currentInterval,
      useEntityStreams
    )?.data

    return summary !== null
      ? {
          label: timeInterval.labelShort,
          interval: currentInterval,
          ...summary,
        }
      : null
  }

  const intervalStreams = [...timeIntervalOptions(oldGraphTimeIntervals)]
    .sort((a, b) => a.days - b.days)
    .map(useIntervalToIntervalStreams)

  const maxIntervalStreams =
    intervalStreams != null
      ? intervalStreams[intervalStreams.length - 1]?.currentIntervalStreams ??
        null
      : null

  return (
    <>
      {intervalStreams.map((summary, i) => (
        <EntityStreamsTableRow key={i + 1} index={i + 1}>
          {summary != null &&
          maxIntervalStreams != null &&
          summary.currentIntervalStreams != null ? (
            <EntityStreamsIntervalTableRow
              currentIntervalStreams={summary.currentIntervalStreams}
              changePercentage={summary.changePercentage ?? undefined}
              maxIntervalStreams={maxIntervalStreams}
              label={summary.label}
              interval={summary.interval}
            />
          ) : (
            <EntityStreamsIntervalTableRowSkeleton />
          )}
        </EntityStreamsTableRow>
      ))}
    </>
  )
}

export const ReleaseToDateTableRow: React.FC<{
  useEntityStreams: (interval: Interval) => StreamsByDateResult
  releaseDate?: string
}> = ({ useEntityStreams, releaseDate }) => {
  const releaseToDateInterval: Interval | null =
    releaseDate != null
      ? {
          start: parseDateString(releaseDate),
          end: new Date(),
        }
      : null

  const releaseToDateStreams =
    releaseToDateInterval != null
      ? useEntityStreams(releaseToDateInterval)
      : undefined

  return releaseDate != null ? (
    <EntityStreamsTableRow index={0} key="releaseToDate">
      <EntityReleaseToDateStreams streams={releaseToDateStreams?.streams} />
    </EntityStreamsTableRow>
  ) : null
}