import React from 'react'
import {
  StyleProp,
  Text,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native'
import { colors, colorsV2 } from '../Colors'
import { PositionChangeAndArrow } from '../components/PositionChangeAndArrow'
import { Strings } from '../i18n'
import Star from '../icons/Star'
import { TextStyles, TextStylesV2 } from '../Styles'
import { formatCountShort } from '../util'

/**
 *
 * Current entity position on some list and change from previous position
 */
export const EntityPositionAndChange: React.FC<{
  position: {
    current?: number
    previous?: number
  }
}> = ({ position: { current, previous } }) => (
  <View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'flex-end',
    }}
  >
    {current != null && previous != null && (
      <PositionChangeAndArrow
        currentValue={current}
        previousValue={previous}
        invertDirection
      />
    )}
    <Text
      style={{
        ...TextStyles.body,
        minWidth: 52,
        textAlign: 'right',
        color: colors.white,
      }}
    >
      {current && `#${current}`}
    </Text>
  </View>
)

const NewAdditionIndicator: React.FC = () => {
  const indicatorSize = 12
  return (
    <View
      style={{
        marginTop: 3,
        flexDirection: 'row',
        alignItems: 'center',
      }}
    >
      <Star style={{ marginLeft: 4, marginRight: 4 }} size={indicatorSize} />
      <Text
        style={[
          TextStylesV2.small,
          {
            // height and lineHeight ensure vertical alignment
            height: indicatorSize,
            // Font requires manual vertical center-align
            lineHeight: TextStylesV2.small.fontSize + 1,
            color: colorsV2.white,
          },
        ]}
      >
        {Strings.Shared.New}
      </Text>
    </View>
  )
}

export const EntityPositionListItem: React.FC<{
  image: React.ReactElement
  name: string
  showDetails: boolean
  pressDisabled?: boolean
  style?: StyleProp<ViewStyle>
  onPress?: () => void
  isNew: boolean
  streams?: number
  position?: {
    current?: number
    previous?: number
  }
}> = ({
  image,
  name,
  onPress,
  pressDisabled,
  style,
  isNew,
  streams,
  position,
}) => {
  return (
    <TouchableOpacity onPress={onPress} disabled={pressDisabled} style={style}>
      <View
        style={{
          flexDirection: 'row',
          flex: 1,
        }}
      >
        {image}
        <View
          style={{
            flexDirection: 'column',
            flex: 1,
            justifyContent: 'space-evenly',
          }}
        >
          <View
            style={{
              flexDirection: 'row',
              overflow: 'hidden',
            }}
          >
            <View style={{ flexShrink: 1 }}>
              <Text
                ellipsizeMode="tail"
                numberOfLines={1}
                style={[TextStylesV2.body, { color: colorsV2.white }]}
              >
                {name}
              </Text>
            </View>
            {isNew ? <NewAdditionIndicator /> : null}
          </View>

          <View
            style={{
              flex: 1,
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}
          >
            <View>
              {streams != null ? (
                <Text
                  style={{ ...TextStylesV2.body, color: colorsV2.offWhite }}
                >
                  {formatCountShort(streams)}
                </Text>
              ) : null}
            </View>
            {position != null ? (
              <EntityPositionAndChange position={position} />
            ) : null}
          </View>
        </View>
      </View>
    </TouchableOpacity>
  )
}