import type { ChangeEventHandler, UIEventHandler } from 'react'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@langgenius/dify-ui/popover'
import {
  useCallback,
  useRef,
  useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
import { useEducation } from './hooks'

type SearchInputProps = {
  value?: string
  onChange: (value: string) => void
}

const SearchInput = ({
  value,
  onChange,
}: SearchInputProps) => {
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
  const {
    schools,
    setSchools,
    querySchoolsWithDebounced,
    handleUpdateSchools,
    hasNext,
  } = useEducation()
  const pageRef = useRef(0)
  const valueRef = useRef(value)

  const handleSearch = useCallback((debounced?: boolean) => {
    const keywords = valueRef.current
    const page = pageRef.current
    if (debounced) {
      querySchoolsWithDebounced({
        keywords,
        page,
      })
      return
    }

    handleUpdateSchools({
      keywords,
      page,
    })
  }, [handleUpdateSchools, querySchoolsWithDebounced])

  const handleValueChange: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
    setOpen(true)
    setSchools([])
    pageRef.current = 0
    const inputValue = e.target.value
    valueRef.current = inputValue
    onChange(inputValue)
    handleSearch(true)
  }, [handleSearch, onChange, setSchools])

  const handleScroll: UIEventHandler<HTMLDivElement> = useCallback((e) => {
    const target = e.currentTarget
    const {
      scrollTop,
      scrollHeight,
      clientHeight,
    } = target
    if (scrollTop + clientHeight >= scrollHeight - 5 && scrollTop > 0 && hasNext) {
      pageRef.current += 1
      handleSearch()
    }
  }, [handleSearch, hasNext])

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger
        nativeButton={false}
        render={(
          <Input
            className="w-full"
            placeholder={t('form.schoolName.placeholder', { ns: 'education' })}
            value={value}
            onChange={handleValueChange}
          />
        )}
      />
      {open && !!schools.length && !!value && (
        <PopoverContent
          placement="bottom"
          sideOffset={4}
          popupClassName="w-[var(--anchor-width)] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg"
          positionerProps={{ style: { zIndex: 32 } }}
        >
          <div
            className="max-h-[330px] overflow-y-auto"
            onScroll={handleScroll}
          >
            {schools.map(school => (
              <div
                key={school}
                className="flex h-8 cursor-pointer items-center truncate rounded-lg px-2 py-1.5 system-md-regular text-text-secondary hover:bg-state-base-hover"
                title={school}
                onClick={() => {
                  onChange(school)
                  setOpen(false)
                }}
              >
                {school}
              </div>
            ))}
          </div>
        </PopoverContent>
      )}
    </Popover>
  )
}

export default SearchInput
