import { BaseSelectProps } from '@mui/material'
import { useEffect, useState } from 'react'
import { Controller } from 'react-hook-form'
import axios from '../../../../config/axios'
import { MultiSelect } from '../../../Input'

type MultiFacultySelectorProps = {
  control: any
  name?: string
  label: string
  filters?: {
    departmentId: string
    isSearch: boolean
    isActive: boolean
    type: string
  }
  required?: boolean
  onChange?: (value: any) => void
  allowAll?: boolean
  error?: boolean
  helperText?: string
  api?: string
} & BaseSelectProps
const MultiFacultySelector = (props: MultiFacultySelectorProps) => {
  const {
    control,
    onChange,
    name,
    required = false,
    label,
    multiple = true,
    filters,
    value,
    allowAll = true,
    api = '/hrms/employees',
  } = props
  const [options, setOptions] = useState([])
  const [prevDepartmentId, setPrevDepartmentId] = useState(null)
  const handleOpen = () => {
    if (filters) {
      if (filters.departmentId && filters.departmentId !== prevDepartmentId) {
        setOptions([])
        axios
          .get(api, {
            params: filters,
          })
          .then((response) => {
            setOptions(response.data.data)
            setPrevDepartmentId(filters.departmentId)
          })
          .catch((error) => {
            console.error('Error fetching data from the API:', error)
          })
      }
    } else if (options.length === 0) {
      axios
        .get(api)
        .then((response) => {
          setOptions(response.data.data)
        })
        .catch((error) => {
          console.error('Error fetching data from the API:', error)
        })
    }
  }
  useEffect(() => {
    if (props?.value && props.value != 'all') {
      handleOpen()
    }
  }, [props.value])

  const handleOptions =
    options.length > 0
      ? [
          ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
          ...options.map((item) => ({
            label: `${item.fullName}`,
            value: `${item._id}`,
          })),
        ]
      : allowAll
      ? [{ value: 'all', label: 'All' }]
      : []

  return (
    <Controller
      name={name}
      control={control}
      render={({ field, fieldState: { error } }) => (
        <MultiSelect
          name={name}
          label={label}
          required={required}
          options={handleOptions}
          onOpen={handleOpen}
          onChange={onChange ?? field.onChange}
          value={value ?? field?.value}
          error={!!error}
          helperText={error?.message}
          multiple={multiple}
        />
      )}
    />
  )
}
export default MultiFacultySelector
