import { StyleSheet, View, type ViewStyle } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useTheme } from '../../hooks'
import { Button, Text } from '../display'

export const LeaderMessagesDisabledBanner = () => {
  return (
    <MessagesDisabledBanner description="Only leaders can send messages in this conversation." />
  )
}

export const MemberMessagesDisabledBanner = () => {
  const styles = useStyles()

  return (
    <MessagesDisabledBanner
      description="Only leaders can send messages, but you can still add reactions."
      style={styles.memberBanner}
    />
  )
}

const DEFAULT_DISABLED_TEXT = 'This conversation has been disabled.'

interface BannerAction {
  label: string
  onPress: () => void
  loading?: boolean
}

interface ConversationDisabledBannerProps {
  message: string | null
  action?: BannerAction
}

export const ConversationDisabledBanner = ({
  message,
  action,
}: ConversationDisabledBannerProps) => {
  const styles = useStyles()
  const description = message ?? DEFAULT_DISABLED_TEXT

  return (
    <MessagesDisabledBanner description={description} style={styles.memberBanner} action={action} />
  )
}

interface MessagesDisabledBannerProps {
  description: string
  style?: ViewStyle
  action?: BannerAction
}

const MessagesDisabledBanner = ({ description, style, action }: MessagesDisabledBannerProps) => {
  const styles = useStyles()

  return (
    <View style={[styles.baseBanner, style]}>
      <Text style={styles.text} variant="tertiary">
        {description}
      </Text>
      {action && (
        <Button
          variant="fill"
          size="lg"
          title={action.label}
          onPress={action.onPress}
          loading={action.loading}
          style={styles.actionButton}
        />
      )}
    </View>
  )
}

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

  return StyleSheet.create({
    baseBanner: {
      paddingHorizontal: 16,
      paddingVertical: 4,
      backgroundColor: colors.statusNeutralComposedBackground,
      borderTopWidth: 1,
      borderTopColor: colors.borderColorDefaultBase,
    },
    text: {
      textAlign: 'center',
    },
    memberBanner: {
      paddingTop: 16,
      paddingBottom: 16 + bottom,
      marginBottom: -bottom,
    },
    actionButton: {
      marginTop: 12,
    },
  })
}