import { useState } from 'react'
import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { cn } from '@/utils/cn'

interface SelectProps {
  value: string
  onValueChange: (value: string) => void
  children: React.ReactNode
}

export function Select({ value, onValueChange, children }: SelectProps) {
  const [open, setOpen] = useState(false)

  const handleSelect = (newValue: string) => {
    onValueChange(newValue)
    setOpen(false)
  }

  return (
    <View className="relative">
      {children}
    </View>
  )
}

interface SelectTriggerProps {
  className?: string
  children: React.ReactNode
}

export function SelectTrigger({ className, children }: SelectTriggerProps) {
  return (
    <View
      className={cn(
        "flex h-10 w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm",
        className
      )}
    >
      {children}
    </View>
  )
}

interface SelectValueProps {
  placeholder?: string
}

export function SelectValue({ placeholder }: SelectValueProps) {
  return (
    <Text className="text-gray-700">
      {placeholder || '选择...'}
    </Text>
  )
}

interface SelectContentProps {
  className?: string
  children: React.ReactNode
}

export function SelectContent({ className, children }: SelectContentProps) {
  return (
    <View
      className={cn(
        "absolute z-50 mt-1 w-full rounded-md border border-gray-300 bg-white shadow-lg",
        className
      )}
    >
      {children}
    </View>
  )
}

interface SelectItemProps {
  value: string
  className?: string
  children: React.ReactNode
}

export function SelectItem({ value, className, children }: SelectItemProps) {
  return (
    <View
      className={cn(
        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 px-3 text-sm outline-none hover:bg-gray-100",
        className
      )}
      onClick={() => {
        // 这里需要从父组件传递onValueChange
        console.log('Selected:', value)
      }}
    >
      {children}
    </View>
  )
}