import { getListColor } from 'src/lib/lists/listColors'
import { Text, View, XStack } from 'tamagui'

// Overlapping coloured dots showing which lists an account already belongs to,
// mirroring FediverseLists' `AccountRowView` membership row. Up to four dots
// then a `+N` pill, each dot coloured by the OKLab palette (§listColors) and
// outlined in the screen background so they read as floating tokens rather
// than a glued-together bar.

const DOT = 12
const MAX_DOTS = 4

type Props = {
  listIds: string[]
  colorIndices: Record<string, number>
}

export function MembershipDots({ listIds, colorIndices }: Props) {
  if (listIds.length === 0) return null

  const overflow = listIds.length > MAX_DOTS + 1 ? listIds.length - MAX_DOTS : 0
  const shown = overflow > 0 ? listIds.slice(0, MAX_DOTS) : listIds.slice(0, MAX_DOTS + 1)

  return (
    <XStack
      alignItems="center"
      accessibilityLabel={`Member of ${listIds.length} ${listIds.length === 1 ? 'list' : 'lists'}`}
    >
      {shown.map((id, i) => (
        <View
          key={id}
          width={DOT}
          height={DOT}
          borderRadius={DOT / 2}
          backgroundColor={getListColor(id, colorIndices)}
          borderWidth={1.5}
          borderColor="$background"
          marginLeft={i === 0 ? 0 : -4}
        />
      ))}
      {overflow > 0 ? (
        <View
          height={DOT}
          minWidth={DOT}
          borderRadius={DOT / 2}
          paddingHorizontal={3}
          backgroundColor="$backgroundTertiary"
          borderWidth={1.5}
          borderColor="$background"
          marginLeft={-4}
          alignItems="center"
          justifyContent="center"
        >
          <Text
            fontSize="$micro"
            lineHeight={DOT}
            color="$colorTertiary"
            fontWeight="600"
          >
            +{overflow}
          </Text>
        </View>
      ) : null}
    </XStack>
  )
}
