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

import { colors } from '../../Colors'
import { TextStyles } from '../../Styles'
import { Strings } from '../../i18n'
import Star from '../../icons/Star'
import { formatCountShort } from '../../util'
import { PositionChangeAndArrow } from '../PositionChangeAndArrow'

/**
 *
 * 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.midWhite,
      }}
    >
      {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={[
          TextStyles.small,
          {
            // height and lineHeight ensure vertical alignment
            height: indicatorSize,
            // Font requires manual vertical center-align
            lineHeight: TextStyles.small.fontSize + 1,
            color: colors.white,
          },
        ]}
      >
        {Strings.Shared.New}
      </Text>
    </View>
  )
}

export const EntityPositionListItem: React.FC<{
  image: React.ReactElement
  name: string
  topRightText?: string
  pressDisabled?: boolean
  style?: StyleProp<ViewStyle>
  onPress?: () => void
  isNew: boolean
  streams?: number
  extra?: React.ReactElement
  accessibilityLabel?: string
}> = ({
  image,
  name,
  topRightText,
  onPress,
  pressDisabled,
  style,
  isNew,
  streams,
  extra,
  accessibilityLabel,
}) => {
  return (
    <TouchableOpacity
      onPress={onPress}
      disabled={pressDisabled}
      style={style}
      accessibilityLabel={accessibilityLabel}
    >
      <View
        style={{
          flexDirection: 'row',
          flex: 1,
        }}
      >
        {image}
        <View
          style={{
            flexDirection: 'column',
            flex: 1,
            justifyContent: 'space-evenly',
          }}
        >
          <View
            style={{
              flexDirection: 'row',
              overflow: 'hidden',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <View
              style={{
                flexShrink: 1,
                flexDirection: 'row',
                alignItems: 'center',
                width: isNew ? '60%' : '70%',
              }}
            >
              <Text
                ellipsizeMode="tail"
                numberOfLines={1}
                style={[TextStyles.body, { color: colors.white }]}
              >
                {name}
              </Text>
              {isNew ? <NewAdditionIndicator /> : null}
            </View>
            {topRightText != null ? (
              <Text
                numberOfLines={1}
                style={[
                  TextStyles.tinyBold,
                  {
                    color: colors.white,
                    textAlign: 'right',
                  },
                ]}
              >
                {topRightText}
              </Text>
            ) : null}
          </View>

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