import React from 'react'
import PropTypes from 'prop-types'
import { View, StyleSheet, Text, Pressable } from 'react-native'
import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
import { useCopy } from '../utils/useCopy'
import { variantProp } from '../utils/props/variantProp'
import { copyPropTypes } from '../utils/props/copyPropTypes'
import { Icon } from '../Icon/Icon'
import { IconButton } from '../IconButton/IconButton'
import { Divider } from '../Divider/Divider'
import { dictionary as defaultDictionary } from './dictionary'

const styles = StyleSheet.create({
  headerContainer: {
    width: '100%'
  },
  headerContent: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%'
  },
  leftSection: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1
  },
  backIcon: {
    marginRight: 8,
    flexShrink: 0
  },
  labelText: {
    flex: 1
  },
  closeButton: {
    flexShrink: 0
  },
  dividerContainer: {
    width: '100%'
  }
})

const selectHeaderContainerStyles = ({ secondLevelHeaderBackgroundColor }) => ({
  backgroundColor: secondLevelHeaderBackgroundColor
})

const selectHeaderContentStyles = ({
  secondLevelHeaderPaddingTop,
  secondLevelHeaderPaddingBottom,
  secondLevelHeaderPaddingLeft,
  secondLevelHeaderPaddingRight
}) => ({
  paddingTop: secondLevelHeaderPaddingTop,
  paddingBottom: secondLevelHeaderPaddingBottom,
  paddingLeft: secondLevelHeaderPaddingLeft,
  paddingRight: secondLevelHeaderPaddingRight
})

const selectLabelTextStyles = ({
  secondLevelBackLinkFontName,
  secondLevelBackLinkFontWeight,
  secondLevelBackLinkFontSize,
  secondLevelBackLinkColor
}) => ({
  fontFamily: `${secondLevelBackLinkFontName}${secondLevelBackLinkFontWeight}normal`,
  fontSize: secondLevelBackLinkFontSize,
  color: secondLevelBackLinkColor
})

/**
 * SecondLevelHeader component for Listbox secondLevel variant.
 * Displays a header with back button icon, title text, and close button (IconButton),
 * separated from content by a Divider.
 */
export const SecondLevelHeader = React.forwardRef(
  (
    {
      label,
      onBack,
      onClose,
      copy = 'en',
      dictionary = defaultDictionary,
      tokens: tokensProp = {},
      variant = {}
    },
    ref
  ) => {
    const tokens = useThemeTokens('Listbox', variant, tokensProp)
    const getCopy = useCopy({ dictionary, copy })

    const {
      secondLevelBackIcon,
      secondLevelBackIconColor,
      secondLevelCloseIcon,
      secondLevelCloseIconSize,
      secondLevelCloseButtonBorderWidth,
      secondLevelCloseButtonPadding,
      secondLevelDividerColor,
      secondLevelDividerWidth
    } = tokens

    return (
      <View style={[styles.headerContainer, selectHeaderContainerStyles(tokens)]} ref={ref}>
        <View style={[styles.headerContent, selectHeaderContentStyles(tokens)]}>
          <Pressable onPress={onBack} style={styles.leftSection}>
            <View style={styles.backIcon}>
              <Icon
                icon={secondLevelBackIcon}
                tokens={{
                  color: secondLevelBackIconColor
                }}
                variant={{ size: 'micro' }}
              />
            </View>
            <Text numberOfLines={1} style={[styles.labelText, selectLabelTextStyles(tokens)]}>
              {label}
            </Text>
          </Pressable>
          <View style={styles.closeButton}>
            <IconButton
              icon={secondLevelCloseIcon}
              onPress={onClose}
              accessibilityLabel={getCopy('closeMenu')}
              tokens={{
                iconSize: secondLevelCloseIconSize,
                borderWidth: secondLevelCloseButtonBorderWidth,
                padding: secondLevelCloseButtonPadding
              }}
            />
          </View>
        </View>
        <View style={styles.dividerContainer}>
          <Divider
            tokens={{
              color: secondLevelDividerColor,
              width: secondLevelDividerWidth
            }}
          />
        </View>
      </View>
    )
  }
)

SecondLevelHeader.displayName = 'SecondLevelHeader'

SecondLevelHeader.propTypes = {
  /**
   * The label text to display (typically the parent item label)
   */
  label: PropTypes.string.isRequired,
  /**
   * Callback when back button is clicked
   */
  onBack: PropTypes.func.isRequired,
  /**
   * Callback when close button is clicked
   */
  onClose: PropTypes.func.isRequired,
  /**
   * Select English or French copy
   */
  copy: copyPropTypes,
  /**
   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
   */
  dictionary: PropTypes.shape({
    en: PropTypes.shape({
      closeMenu: PropTypes.string.isRequired
    }),
    fr: PropTypes.shape({
      closeMenu: PropTypes.string.isRequired
    })
  }),
  /**
   * Custom tokens to override theme tokens
   */
  tokens: PropTypes.object,
  /**
   * Variant configuration
   */
  variant: variantProp.propType
}