import React, { FC, ReactNode } from 'react'
import { View, StyleSheet, ViewStyle } from 'react-native'
import { useTheme } from '../../hooks'
import {
  Button,
  Heading,
  Icon,
  TextButton,
  Text,
  type ButtonProps,
  type HeadingProps,
  type IconString,
  type IconStyle,
  type TextButtonProps,
  type TextProps,
} from '../display'

// ========================================
// ====== Exports =========================
// ========================================

const BlankState = {
  Root: BlankStateRoot,
  Imagery: BlankStateImagery,
  Content: BlankStateContent,
  Heading: BlankStateHeading,
  Text: BlankStateText,
  Button: BlankStateButton,
  TextButton: BlankStateTextButton,
} as const

type BlankStateComponents = {
  Root: FC<BlankStateRootProps>
  Imagery: FC<BlankStateImageryProps>
  Content: FC<BlankStateContentProps>
  Heading: FC<BlankStateHeadingProps>
  Text: FC<BlankStateTextProps>
  Button: FC<BlankStateButtonProps>
  TextButton: FC<BlankStateTextButtonProps>
}

export default BlankState as BlankStateComponents
export type {
  BlankStateRootProps,
  BlankStateImageryProps,
  BlankStateContentProps,
  BlankStateHeadingProps,
  BlankStateTextProps,
  BlankStateButtonProps,
  BlankStateTextButtonProps,
}

// ========================================
// ====== BlankStateRoot ==================
// ========================================

interface BlankStateRootProps {
  children: ReactNode
  style?: ViewStyle
}

function BlankStateRoot({ children, style }: BlankStateRootProps) {
  const styles = useStyles()

  return <View style={[styles.container, style]}>{children}</View>
}

BlankStateRoot.displayName = 'BlankState.Root'

// ========================================
// ====== BlankStateImagery ===============
// ========================================

interface BlankStateImageryProps {
  name: IconString
  size?: number
  style?: IconStyle
}

function BlankStateImagery({ name, size = 32, style }: BlankStateImageryProps) {
  const styles = useStyles()

  /*
  NOTE:
  BlankState.Imagery will eventually return more then just an Icon component
  Eventually it will need to return SVG illustrations from the theme or internally for Services Mobile.
  This first step of using a more abstract component just allows us to keep this component open to change, without being overly perscriptive on how the change should be implomented.

*/

  return <Icon name={name} size={size} style={[styles.imagery, style]} />
}

BlankStateImagery.displayName = 'BlankState.Imagery'

// ========================================
// ====== BlankStateContent ===============
// ========================================

interface BlankStateContentProps {
  children: ReactNode
  style?: ViewStyle
}

function BlankStateContent({ children, style }: BlankStateContentProps) {
  const styles = useStyles()

  return <View style={[styles.content, style]}>{children}</View>
}

BlankStateContent.displayName = 'BlankState.Content'

// ========================================
// ====== BlankStateHeading ===============
// ========================================

interface BlankStateHeadingProps {
  children: ReactNode
  style?: HeadingProps['style']
}

function BlankStateHeading({ children, style }: BlankStateHeadingProps) {
  const styles = useStyles()

  return (
    <Heading variant="h3" style={[styles.heading, style]}>
      {children}
    </Heading>
  )
}

BlankStateHeading.displayName = 'BlankState.Heading'

// ========================================
// ====== BlankStateText ==================
// ========================================

interface BlankStateTextProps {
  children: ReactNode
  style?: TextProps['style']
}

function BlankStateText({ children, style }: BlankStateTextProps) {
  const styles = useStyles()

  return (
    <Text variant="tertiary" style={[styles.text, style]}>
      {children}
    </Text>
  )
}

BlankStateText.displayName = 'BlankState.Text'

// ========================================
// ====== BlankStateButton ================
// ========================================

interface BlankStateButtonProps extends ButtonProps {}

function BlankStateButton(props: BlankStateButtonProps) {
  return <Button variant="outline" size="sm" {...props} />
}

BlankStateButton.displayName = 'BlankState.Button'

// ========================================
// ====== BlankStateTextButton ================
// ========================================

interface BlankStateTextButtonProps extends TextButtonProps {}

function BlankStateTextButton(props: BlankStateTextButtonProps) {
  return <TextButton variant="tertiary" {...props} />
}

BlankStateTextButton.displayName = 'BlankState.TextButton'

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

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

  return StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      gap: 16,
      padding: 16,
    },
    imagery: {
      color: colors.iconColorDefaultDisabled,
    },
    content: {
      alignItems: 'center',
      gap: 4,
      maxWidth: 250,
    },
    heading: {
      textAlign: 'center',
      color: colors.textColorDefaultSecondary,
    },
    text: {
      textAlign: 'center',
      color: colors.textColorDefaultSecondary,
    },
  })
}