import React from 'react'
import { StyleSheet, useWindowDimensions, View } from 'react-native'
import Animated, {
  FadeIn,
  FadeOut,
  LayoutAnimationConfig,
  ReduceMotion,
} from 'react-native-reanimated'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useReduceMotion, useTheme } from '../../hooks'
import { ConversationWarning } from '../../types'
import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
import { Banner } from './banner'
import { Button } from './button'
import { IconString } from './icon'
import { Text } from './text'

export const ActionButton = ({
  visible = true,
  disabled = false,
  onPress,
  title,
  infoText,
  buttonIconNameLeft,
  secondaryButton,
  loading = false,
  warnings = [],
}: {
  visible?: boolean
  disabled?: boolean
  onPress: () => void
  title: string
  infoText?: string
  buttonIconNameLeft?: IconString
  secondaryButton?: React.ReactNode
  loading?: boolean
  warnings?: ConversationWarning[]
}) => {
  const styles = useStyles()
  const reduceMotion = useReduceMotion() ? ReduceMotion.Always : ReduceMotion.Never

  return (
    <LayoutAnimationConfig skipEntering>
      {visible && (
        <Animated.View
          entering={FadeIn.duration(300).reduceMotion(reduceMotion)}
          exiting={FadeOut.duration(300).reduceMotion(reduceMotion)}
          style={styles.container}
        >
          {warnings.length > 0 && (
            <View style={styles.warnings}>
              {warnings.map((warning, index) => (
                <Banner
                  key={`${warning.attribute}-${index}`}
                  appearance="error"
                  description={warning.fullMessage}
                />
              ))}
            </View>
          )}
          {Boolean(infoText) && (
            <Text style={styles.infoText} variant="footnote">
              {infoText}
            </Text>
          )}
          <View style={styles.buttonRow}>
            {secondaryButton}
            <Button
              variant="fill"
              size="lg"
              onPress={onPress}
              title={title}
              disabled={disabled}
              style={secondaryButton ? null : styles.fullWidthButton}
              iconNameLeft={buttonIconNameLeft}
              loading={loading}
              maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
              accessibilityShowsLargeContentViewer
              accessibilityLargeContentTitle={title}
            />
          </View>
        </Animated.View>
      )}
    </LayoutAnimationConfig>
  )
}

const useStyles = () => {
  const { fontScale } = useWindowDimensions()
  const { bottom } = useSafeAreaInsets()
  const { colors } = useTheme()
  const containerVerticalPadding = 16

  return StyleSheet.create({
    container: {
      backgroundColor: colors.surfaceColor090,
      paddingHorizontal: 24,
      paddingTop: containerVerticalPadding,
      paddingBottom: bottom + containerVerticalPadding,
      borderTopWidth: 1,
      borderTopColor: colors.borderColorDefaultDim,
      gap: 16,
    },
    buttonRow: {
      flexDirection: 'row',
      justifyContent: fontScale > 1 ? 'center' : 'space-between',
      alignItems: 'center',
      gap: 16,
      flexWrap: 'wrap-reverse',
    },
    fullWidthButton: {
      flexGrow: 1,
    },
    infoText: {
      textAlign: 'center',
    },
    warnings: {
      gap: 8,
    },
  })
}