import React from 'react'
import { StyleSheet, View } from 'react-native'
import { useTheme } from '../../hooks'
import type { ConversationResource } from '../../types'
import { tokens } from '../../vendor/tapestry/tokens'
import { ConversationAvatar } from '../display/conversation_avatar'
import { Heading } from '../display/heading'
import { Icon } from '../display/icon'
import { Text } from '../display/text'

type ConversationStartBannerData = Pick<
  ConversationResource,
  | 'title'
  | 'customAvatarType'
  | 'customAvatarKey'
  | 'customAvatarColor'
  | 'customAvatarImageUrl'
  | 'previewAvatarUrls'
  | 'directMessage'
>

interface ConversationStartBannerProps {
  conversation: ConversationStartBannerData
  hasMessages: boolean
}

export function ConversationStartBanner({
  conversation,
  hasMessages,
}: ConversationStartBannerProps) {
  const styles = useStyles()
  const { colors } = useTheme()
  const introText = hasMessages
    ? 'This is the beginning of your conversation.'
    : 'This conversation is hidden from everyone until you send a message.'

  return (
    <View style={styles.container}>
      <ConversationAvatar conversation={conversation} size="2xl" />
      <Heading variant="h3" style={styles.title}>
        {conversation.title}
      </Heading>
      <Text style={styles.subtitle}>{introText}</Text>
      {conversation.directMessage && (
        <View style={styles.safetyNotice}>
          <Icon
            name="general.shieldExclamation"
            size={16}
            color={colors.statusWarningComposedIcon}
            style={styles.safetyIcon}
          />
          <Text style={styles.safetyText}>
            {
              "This is your church's communication platform. Be kind, stay safe, and report anything concerning."
            }
          </Text>
        </View>
      )}
    </View>
  )
}

const useStyles = () => {
  const { colors } = useTheme()

  return StyleSheet.create({
    container: {
      alignItems: 'center',
      paddingHorizontal: 16,
      paddingVertical: 24,
      gap: 8,
    },
    title: {
      textAlign: 'center',
    },
    subtitle: {
      textAlign: 'center',
      color: colors.textColorDefaultSecondary,
      fontSize: tokens.fontSizeSm,
    },
    safetyNotice: {
      flexDirection: 'row',
      alignItems: 'flex-start',
      gap: 8,
      marginTop: 4,
      padding: 12,
      backgroundColor: colors.statusWarningComposedBackground,
      borderColor: colors.statusWarningBorder,
      borderWidth: 1,
      borderRadius: 8,
      width: '100%',
    },
    safetyIcon: {
      marginTop: 1,
    },
    safetyText: {
      flex: 1,
      color: colors.statusWarningComposedText,
      fontSize: tokens.fontSizeSm,
    },
  })
}