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

import { colors } from '../Colors'
import { SocialFollowers } from '../Consts'
import { TextStyles } from '../Styles'
import manifest from '../appManifest'
import { NetworkError } from '../hooks/useNetwork'
import { Strings } from '../i18n'
import { LineData } from '../types/LineData'
import { TimeInterval } from '../types/TimeInterval'
import {
  changePercent,
  formatCountShort,
  timeRangeInterval,
  open,
} from '../util'
import { formatInterval } from '../util/date'
import { Button } from './Button'
import { DataTile } from './DataTile'
import { PercentPill } from './PercentPill'
import { LineFigure } from './figures/LineFigure'

const LinkSocialProfile = () => (
  <View
    style={{
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'space-around',
      alignItems: 'center',
    }}
  >
    <Text
      style={[
        TextStyles.bodySmall,
        {
          color: colors.white,
          textAlign: 'center',
          fontFamily: 'Montserrat Regular',
        },
      ]}
    >
      {Strings.Social.MissingProfile}
    </Text>
    <Button
      style={{ borderColor: colors.white }}
      textStyle={[TextStyles.bodyMedium, { color: colors.white }]}
      onPress={() => open(manifest.extra.linkProfileUrl)}
    >
      {Strings.Social.Submit}
    </Button>
  </View>
)

const SocialGraph = ({
  data,
  current,
}: {
  data: LineData
  current: number | null
}) => (
  <>
    <LineFigure data={[data]} grid tickLabels="right" minY={0} />
    {current && (
      <>
        <Text
          style={[
            TextStyles.tiny,
            { textTransform: 'uppercase', color: colors.metals.metal0 },
          ]}
        >
          {Strings.Shared.Total}
        </Text>
        <Text style={[TextStyles.h4, { color: colors.white }]}>
          {formatCountShort(current)}
        </Text>
      </>
    )}
  </>
)

export const SocialTile: React.FC<{
  current: number | null
  previous: number | null
  data: LineData
  dsp: SocialFollowers
  error: NetworkError | null
  onPress: () => void
  style: StyleProp<ViewStyle>
  timeInterval: TimeInterval
  title: string
  profile: string | null
}> = ({
  current,
  previous,
  data,
  dsp,
  error,
  onPress,
  style,
  timeInterval,
  title,
  profile,
}) => {
  const currentInterval = timeRangeInterval(timeInterval)
  const changePercentage =
    current && previous ? changePercent(current, previous) : NaN

  const missingProfile = current == null && profile == null

  return (
    <DataTile
      dsp={dsp}
      title={startCase(title.toLowerCase().replace(dsp, '').trim())}
      subTitle={formatInterval(currentInterval)}
      titleWidget={
        !isNaN(changePercentage) && (
          <PercentPill
            style={{ alignSelf: 'flex-end' }}
            percentage={changePercentage}
          />
        )
      }
      onPress={onPress}
      style={[{ minHeight: 340 }, style]}
      error={error}
    >
      {missingProfile ? (
        <LinkSocialProfile />
      ) : (
        <SocialGraph data={data} current={current} />
      )}
    </DataTile>
  )
}