import React from 'react'
import { StyleSheet, View } from 'react-native'
import { useTheme } from '../../hooks'
import {
  MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
  Menu,
  MenuAction,
  MenuActionEvent,
  platformFontWeightBold,
} from '../../utils'
import { tokens } from '../../vendor/tapestry/tokens'
import { Icon } from './icon'
import { Text } from './text'

// =================================
// ====== Constants ================
// =================================

const MORE_FILTERS_ID = 'more_filters'
const MORE_FILTERS_LABEL = 'More filters'

// =================================
// ====== Component ================
// =================================

export interface FilterDropdownOption {
  id: string
  label: string
}

export interface FilterDropdownProps {
  options: FilterDropdownOption[]
  selectedId: string
  onSelect: (id: string) => void
  onMoreFilters: () => void
  triggerLabel: string
  showMoreFilters?: boolean
}

export function FilterDropdown({
  options,
  selectedId,
  onSelect,
  onMoreFilters,
  triggerLabel,
  showMoreFilters = true,
}: FilterDropdownProps) {
  const styles = useStyles()

  const optionActions: MenuAction[] = options.map(option => ({
    id: option.id,
    title: option.label,
    state: option.id === selectedId ? ('on' as const) : ('off' as const),
  }))
  const moreFiltersAction: MenuAction = {
    id: MORE_FILTERS_ID,
    title: '',
    displayInline: true,
    subactions: [{ id: MORE_FILTERS_ID, title: MORE_FILTERS_LABEL }],
  }
  const actions = showMoreFilters ? [...optionActions, moreFiltersAction] : optionActions

  const handlePressAction = ({ nativeEvent }: MenuActionEvent) => {
    if (nativeEvent.event === MORE_FILTERS_ID) {
      onMoreFilters()
    } else {
      onSelect(nativeEvent.event)
    }
  }

  return (
    <Menu.View actions={actions} onPressAction={handlePressAction} style={styles.container}>
      <View
        style={styles.trigger}
        accessible
        accessibilityRole="button"
        accessibilityHint="Opens filter options"
      >
        <Text
          style={styles.triggerLabel}
          numberOfLines={1}
          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
        >
          {triggerLabel}
        </Text>
        <Icon
          name="general.downChevron"
          style={styles.triggerIcon}
          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
          accessibilityElementsHidden
        />
      </View>
    </Menu.View>
  )
}

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

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

  return StyleSheet.create({
    container: {
      alignSelf: 'flex-start',
    },
    trigger: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 6,
      paddingVertical: 4,
    },
    triggerLabel: {
      flexShrink: 1,
      fontWeight: platformFontWeightBold,
      color: colors.textColorDefaultPrimary,
    },
    triggerIcon: {
      fontSize: tokens.fontSizeSm,
      color: colors.iconColorDefaultPrimary,
    },
  })
}