import React from 'react'
import { View, StyleSheet, type ViewStyle } from 'react-native'
import { MemberResource } from '../../types'
import { platformFontWeightMedium, pluralize } from '../../utils'
import BannerPrimitive from '../primitive/banner_primitive'
import { Avatar } from './avatar'
import { BannerCollapsible } from './banner_collapsible'
import { Text } from './text'

// =================================
// ====== Component ================
// =================================

interface ChildNoticeProps {
  childMembers: MemberResource[]
  showMembers?: boolean
  style?: ViewStyle
}

export function ChildNotice({ childMembers, showMembers = false, style }: ChildNoticeProps) {
  const styles = useStyles()
  const heading = `${pluralize(childMembers.length, 'member')} under age 13`

  return (
    <BannerCollapsible
      appearance="warning"
      iconName="general.shieldExclamation"
      heading={heading}
      style={style}
    >
      <BannerPrimitive.Text>
        Under age members cannot chat. They won't see conversations or notifications.
      </BannerPrimitive.Text>
      {showMembers && (
        <View style={styles.childrenWrapper}>
          {childMembers?.map(child => <Child key={child.id} child={child} />)}
        </View>
      )}
    </BannerCollapsible>
  )
}

function Child({ child }: { child: MemberResource }) {
  const styles = useStyles()
  return (
    <View style={styles.child}>
      <Avatar sourceUri={child.avatar} size="sm" />
      <Text variant="tertiary" style={styles.name}>
        {child.name}
      </Text>
    </View>
  )
}

// =================================
// ====== Styles ===================
// =================================

const useStyles = () => {
  return StyleSheet.create({
    childrenWrapper: {
      marginTop: 8,
      gap: 8,
    },
    child: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 8,
    },
    name: {
      fontWeight: platformFontWeightMedium,
    },
  })
}