import React from 'react'
import { StyleSheet, View, ViewStyle } from 'react-native'
import { Image } from 'expo-image'
import { StyledText } from './StyledText'
import { Card } from './GlassCard'
import { NAVY } from '../constants/colors'
import { SPACING } from '../constants/spacing'

export interface MascotProps {
  message?: string
  style?: ViewStyle
  animate?: boolean
  size?: number
}

const mascotImage = require('@/assets/mascot.gif')

export function Mascot({ message, style, animate = true, size }: MascotProps) {
  return (
    <View style={[styles.container, style]}>
      {message && (
        <View style={styles.bubbleContainer}>
          <Card style={styles.bubble}>
            <StyledText size={13} weight="medium" style={{ textAlign: 'center' }}>
              {message}
            </StyledText>
          </Card>
          <View style={styles.caret} />
        </View>
      )}

      <Image
        source={mascotImage}
        style={[styles.image, size ? { width: size, height: size } : undefined]}
        contentFit="contain"
        cachePolicy="memory-disk"
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    maxWidth: 140,
  },
  image: {
    width: 120,
    height: 120,
  },
  bubbleContainer: {
    alignItems: 'center',
    marginBottom: SPACING[2],
    position: 'relative',
    zIndex: 10,
    width: '100%',
  },
  bubble: {
    paddingHorizontal: SPACING[3],
    paddingVertical: 10,
    width: '100%',
  },
  caret: {
    position: 'absolute',
    bottom: -8,
    alignSelf: 'center',
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 8,
    borderRightWidth: 8,
    borderTopWidth: 8,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderTopColor: NAVY[800],
  },
})
