import _ from 'lodash'
import React from 'react'
import { StyleProp, Text, View, ViewStyle } from 'react-native'

import { colors, SourceColors } from '../Colors'
import { SourceLean } from '../Consts'
import { TextStyles } from '../Styles'
import { Strings } from '../i18n'
import { formatCountShort, formatPercent } from '../util'
import { AutoLayout } from './AutoLayout'

interface LeanSummary {
  type: SourceLean
  streams: number
  percentage: number
}

interface SourceSummary {
  source: string
  streams: number
  percentage: number
}

const leanTitles = {
  leanForward: Strings.Shared.Forward,
  leanBack: Strings.Shared.Back,
}

const getNumberOfLinesForSourceText = (source: string) =>
  source.split(' ').length === 1 ? 1 : 2

const TrackStreamsSourcesTableSourceRow: React.FC<{
  source: string
  streams: number
  percentage: number
  sourceColors?: SourceColors
  style?: StyleProp<ViewStyle>
}> = ({ source, streams, percentage, style, sourceColors }) => {
  const sourceDisplayName = _.startCase(source)

  return (
    <View
      style={[
        style,
        {
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        },
      ]}
    >
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          flexShrink: 1,
        }}
      >
        {source !== 'total' && (
          <View
            style={{
              width: 12,
              height: 12,
              borderRadius: 12,
              backgroundColor: sourceColors?.[source] ?? colors.white,
              marginRight: 8,
              alignItems: 'flex-start',
            }}
          />
        )}
        <Text
          style={[TextStyles.tiny, { color: colors.white, flexShrink: 1 }]}
          lineBreakMode="tail"
          numberOfLines={getNumberOfLinesForSourceText(sourceDisplayName)}
        >
          {sourceDisplayName}
        </Text>
      </View>
      <View style={{ flexDirection: 'row' }}>
        <Text
          style={[
            TextStyles.tiny,
            {
              color: colors.white,
              marginRight: 8,
              width: 32,
              textAlign: 'right',
            },
          ]}
        >
          {formatPercent(percentage, 0, false)}
        </Text>
        <Text
          style={[
            TextStyles.tiny,
            {
              color: colors.white,
              width: 40,
              textAlign: 'right',
            },
          ]}
        >
          {formatCountShort(streams)}
        </Text>
      </View>
    </View>
  )
}

const TrackStreamsSourcesTableLeanColumn: React.FC<{
  lean: LeanSummary
  sources: SourceSummary[]
  sourceColors: SourceColors
  style?: StyleProp<ViewStyle>
}> = ({ lean, sources, style, sourceColors }) => (
  <View style={[style, { flexDirection: 'column', flex: 1 }]}>
    <Text
      style={[TextStyles.body, { color: colors.offWhite, paddingBottom: 16 }]}
    >
      {leanTitles[lean.type]}
    </Text>

    <AutoLayout gap={12}>
      {[
        <TrackStreamsSourcesTableSourceRow
          key="total"
          source="total"
          streams={lean.streams}
          percentage={lean.percentage}
        />,
        ...sources.map(({ source, streams, percentage }) => (
          <TrackStreamsSourcesTableSourceRow
            key={source}
            source={source}
            streams={streams}
            percentage={percentage}
            sourceColors={sourceColors}
          />
        )),
      ]}
    </AutoLayout>
  </View>
)

export const TrackStreamSourcesTable: React.FC<{
  sections: {
    lean: LeanSummary
    sources: SourceSummary[]
  }[]
  sourceColors: SourceColors
  style?: StyleProp<ViewStyle>
}> = ({ sections, style, sourceColors }) => (
  <AutoLayout
    style={[
      {
        flexDirection: 'row',
        paddingBottom: 16,
      },
      style,
    ]}
    gap={30}
  >
    {sections.map(({ lean, sources }) => (
      <TrackStreamsSourcesTableLeanColumn
        key={lean.type}
        lean={lean}
        sources={sources}
        sourceColors={sourceColors}
      />
    ))}
  </AutoLayout>
)