/* eslint-disable react/display-name */
import React, { forwardRef, useImperativeHandle, useState } from 'react'
import InputAutoComplete from '@/components/form/InputAutoComplete'
import { getProjects } from '@/app/launches/service'
import { notification } from 'antd'
import type { ListMeta } from '@/interfaces/common'

interface options {
    value: string
    label: string
}

interface ProjectDropdownProps {
    onSelect?: (value: number | string) => void
    onChange?: (
        value: number | string,
        item:
            | { value: number | string; label: string }
            | Array<{ value: number | string; label: string }>
    ) => void
    filter?: {
        notassigned?: boolean
        city_id?: any
    }
    name?: string
    label?: string
    placeholder?: string
    initialOptions?: Array<{ value: number | string; label: string }>
    onClear?: () => void
    [key: string]: any
}

interface MasterProjectProps extends ProjectDropdownProps {
    // Add a ref parameter
    forwardRef?: React.Ref<{
        addOptions: (options: options[]) => void
        reload: (filter?: { notassigned?: boolean; city_id?: any }) => void
    }>
}

const MasterProjects: React.FC<MasterProjectProps> = forwardRef(
    (
        {
            filter = {},
            onSelect,
            name = 'project_id',
            label,
            onClear,
            placeholder = 'Please Select Project',
            onChange,
            initialOptions = [],
            forwardRef,
            ...rest
        },
        ref
    ) => {
        const [projectOptions, setProjectOptions] =
            useState<Array<{ value: number | string; label: string }>>(initialOptions)
        const [loading, setLoading] = useState(true)
        const [searchQuery, setSearchQuery] = useState<string>('')
        const [meta, setMeta] = useState<ListMeta>({
            total: 0,
            count: 0,
            per_page: 0,
            current_page: 1,
            total_pages: 1
        })
        const [filterState, setFilterState] = useState(filter)

        const fetchProjects = (
            search?: string,
            page: number = 1,
            filterReset: any = false
        ): void => {
            let filterSend = filterState
            if (filterReset) {
                filterSend = filterReset
            }
            setSearchQuery(search ?? '')
            setLoading(true)
            getProjects({ ...filterSend, search, page, is_default: true })
                .then((res: any) => {
                    setLoading(false)
                    const formatData = res?.data?.map((project: any) => ({
                        value: project?.id,
                        label: project?.name
                    })) // formatData
                    setMeta(res?.meta)
                    if (page === 1) {
                        const options = [...initialOptions, ...formatData].filter(
                            (item) =>
                                !projectOptions.some((project) => project.value === item.value)
                        )
                        setProjectOptions(options)
                    } else {
                        setProjectOptions((data) => [...data, ...formatData])
                    }
                })
                .catch((error: any) => {
                    notification.error({
                        message: error?.message,
                        description: error?.response?.data?.message
                    })
                })
        }

        const fetchMoreProjects = (): void => {
            if (meta?.current_page !== meta?.total_pages && !loading) {
                fetchProjects(searchQuery, meta?.current_page + 1)
            }
        }

        const AddProjectOptions = (options: options[]): void => {
            setProjectOptions((data) => [...data, ...options])
        }

        // Expose the reload method using useImperativeHandle
        useImperativeHandle(
            forwardRef,
            () => ({
                addOptions: async (options: options[]) => {
                    AddProjectOptions(options)
                },
                reload: (filterVal: any = {}) => {
                    const newFilter = {
                        ...filterState,
                        ...filterVal
                    }
                    setFilterState(newFilter)
                    fetchProjects('', 1, newFilter)
                }
            }),
            [filterState]
        )

        return (
            <InputAutoComplete
                loading={loading}
                name={name}
                label={label}
                placeholder={placeholder}
                options={projectOptions}
                onSelect={(value) => {
                    if (onSelect) {
                        onSelect(value)
                    }
                }}
                onChange={(value, item) => {
                    if (onChange) onChange(value, item)
                }}
                isSearchable={true}
                onSearch={fetchProjects}
                onClear={() => {
                    fetchProjects()
                    if (onClear !== undefined) {
                        onClear()
                    }
                }}
                onPopupScroll={fetchMoreProjects}
                {...rest}
            />
        )
    }
)

export default MasterProjects