import AsyncSelect from 'react-select/async'
import { useEffect, useRef, useState } from 'react'

import { SelectOption } from '@/src/interfaces/select'
import {
  useFetchStudyYears,
  useFindByIdStudyYears,
} from '@/src/hooks/user/studyYears'
import { InputActionMeta, SingleValue } from 'react-select'
import { debounce } from 'lodash'
import { useUserStore } from '@/src/store/userStore'

interface Props {
  onChange: (value: string) => void
}

export default function AsyncSelectStudyYear({ onChange }: Props) {
  const { paymentConceptSelected } = useUserStore()
  const [optionSelected, setOptionSelected] = useState<SelectOption | null>(
    null,
  )
  const [defaultOptions, setDefaultOptions] = useState<SelectOption[]>([])
  const [searchText, setSearchText] = useState('')
  const setSearchTextDebounced = useRef(
    debounce(searchText => setSearchText(searchText), 500),
  ).current
  const [inputText, setInputText] = useState('')

  const { data: studyYearSelected } = useFindByIdStudyYears(
    paymentConceptSelected?.studyYear.id || '',
  )
  const { data, isLoading, isFetching } = useFetchStudyYears({
    page: 1,
    sort: 'year:desc',
    pageSize: 4,
    search: searchText,
  })

  const handleChange = (option: SingleValue<SelectOption>) => {
    if (option) {
      setOptionSelected(option)
      onChange(option.value)
    }
  }

  const handleInputChange = (newValue: string, event: InputActionMeta) => {
    if (event.action !== 'input-blur' && event.action !== 'menu-close') {
      setSearchTextDebounced(newValue)
      setInputText(newValue)
      if (newValue) {
        setOptionSelected(null)
      }
    }
  }

  const handleLoadOptions = (
    inputValue: string,
    callback: (options: SelectOption[]) => void,
  ) => {
    setSearchTextDebounced(inputValue)
    /* refetch()
      .then(({ data }) => {
        callback(
          data?.studyYears.map(sy => ({
            value: sy.id,
            label: sy.year,
          })) ?? [],
        )
      })
      .catch(e => console.error(e)) */

    callback(
      data?.studyYears.map(sy => ({
        value: sy.id,
        label: sy.year,
      })) ?? [],
    )
  }

  useEffect(() => {
    setDefaultOptions(
      data?.studyYears.map(sy => ({ value: sy.id, label: sy.year })) ?? [],
    )
  }, [])

  useEffect(() => {
    if (studyYearSelected) {
      setOptionSelected(
        studyYearSelected
          ? { value: studyYearSelected.id, label: studyYearSelected.year }
          : null,
      )
    }
  }, [studyYearSelected])

  return (
    <AsyncSelect
      placeholder="Busque ciclo académico"
      noOptionsMessage={() => 'No hay ciclos académicos'}
      value={optionSelected}
      onChange={handleChange}
      isClearable={true}
      inputValue={inputText}
      isLoading={isLoading || isFetching}
      loadingMessage={() => 'Cargando...'}
      cacheOptions
      defaultOptions={defaultOptions}
      loadOptions={handleLoadOptions}
      onInputChange={handleInputChange}
      styles={{
        container: styles => ({
          ...styles,
          borderRadius: '0.5rem',
        }),
        control: styles => ({
          ...styles,
          padding: '2.5px',
          borderRadius: '0.5rem',
          backgroundColor: 'rgb(249 250 251 / var(--tw-bg-opacity))',
        }),
        multiValue: styles => ({
          ...styles,
          backgroundColor: '#c8cce0',
        }),
      }}
    />
  )
}