import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, StyleSheet } from 'react-native'
import { useThemeTokens } from '../ThemeProvider/useThemeTokens'
import { Icon } from '../Icon/Icon'
import { Spacer } from '../Spacer/Spacer'
import { useListboxContext } from './ListboxContext'
import { variantProp } from '../utils/props/variantProp'

const styles = StyleSheet.create({
  container: {
    width: '100%',
    flex: 1,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    boxSizing: 'border-box'
  }
})

const selectTextStyles = (tokens) => ({
  color: tokens.groupColor,
  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
  fontSize: tokens.groupFontSize,
  fontWeight: tokens.groupFontWeight
})

const selectContainerStyles = (tokens) => ({
  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
  fontSize: tokens.groupFontSize,
  color: tokens.groupColor,
  textDecoration: tokens.itemTextDecoration,
  backgroundColor: tokens.groupBackgroundColor,
  outline: tokens.itemOutline,
  minHeight: tokens.groupHeight,
  borderRadius: tokens.groupBorderRadius,
  paddingLeft: tokens.groupPaddingLeft - tokens.groupBorderLeftWidth,
  paddingRight: tokens.groupPaddingRight - tokens.groupBorderRightWidth,
  paddingTop: tokens.groupPaddingTop - tokens.groupBorderTopWidth,
  paddingBottom: tokens.groupPaddingBottom - tokens.groupBorderBottomWidth,
  borderLeftWidth: tokens.groupBorderLeftWidth,
  borderLeftColor: tokens.groupBorderLeftColor,
  borderRightWidth: tokens.groupBorderRightWidth,
  borderRightColor: tokens.groupBorderRightColor,
  borderTopWidth: tokens.groupBorderTopWidth,
  borderTopColor: tokens.groupBorderTopColor,
  borderBottomWidth: tokens.groupBorderBottomWidth,
  borderBottomColor: tokens.groupBorderBottomColor
})

export const GroupControl = React.forwardRef(
  ({ expanded, pressed, hover, focus, label, id, variant = {} }, ref) => {
    const { selectedId, setSelectedId } = useListboxContext()
    const isSecondLevel = variant?.secondLevel === true
    const tokens = useThemeTokens(
      'Listbox',
      variant,
      {},
      {
        expanded,
        pressed,
        hover,
        current: selectedId === id && id !== undefined,
        focus,
        secondLevel: isSecondLevel
      }
    )

    const displayIcon = isSecondLevel ? tokens.secondLevelParentIcon : tokens.groupIcon

    return (
      <View
        onPress={() => setSelectedId(id)}
        style={[styles.container, selectContainerStyles(tokens)]}
        ref={ref}
      >
        <Text style={selectTextStyles(tokens)}>{label}</Text>
        <Spacer space={1} direction="row" />
        {displayIcon && (
          <Icon
            icon={displayIcon}
            tokens={{ color: tokens.groupColor }}
            variant={{ size: 'micro' }}
          />
        )}
      </View>
    )
  }
)

GroupControl.displayName = 'GroupControl'

GroupControl.propTypes = {
  id: PropTypes.string,
  expanded: PropTypes.bool,
  pressed: PropTypes.bool,
  hover: PropTypes.bool,
  focus: PropTypes.bool,
  label: PropTypes.string,
  variant: variantProp.propType
}