import React, { useState } from 'react'
import InputAutoComplete from '@/components/form/InputAutoComplete'
import { CloseCircleFilled } from '@ant-design/icons';
import { getLaunchs } from '@/app/launches/service'
import { notification } from 'antd'
import type { ListMeta } from '@/interfaces/common'
import { useSelector } from 'react-redux'
import { RootState } from '@/store/store'
interface LaunchDropdownProps {
    onSelect?: (value: number | string) => void
    onChange?: (
        value: string | number,
        item:
            | { value: number | string; label: React.ReactNode }
            | Array<{ value: number | string; label: React.ReactNode }>
    ) => void
    name?: string
    label?: string
    placeholder?: string
    initialOptions?: Array<{ value: number | string; label: string }>;
    exclude?:string
    // filter?: {
        
    // }
    onClear?: () => void
    [key: string]: any
}
const MasterLaunchs: React.FC<LaunchDropdownProps> = ({
    onSelect,
    name = 'launch_id',
    label,
    onClear,
    
    placeholder = 'Please Select Launch',
    onChange,
    initialOptions = [],
    exclude,
    ...rest
}) => {
    const [launchOptions, setLaunchOptions] = useState<
    Array<{ value: number | string; label: string }>
    >([])
    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 {statisticsStatus} = useSelector((state: RootState) => state.dashboard);
    
    const fetchLaunchs = (search?: string, page: number = 1, sortColumn: string = "name", sortOrder: string = "asc"): void => {
        setSearchQuery(search ?? '')
        setLoading(true)
        getLaunchs({ /* search, */ page, sortColumn, sortOrder})
            .then((res: any) => {
                setLoading(false)
                const formatData = res?.data?.filter((la: { id: string | undefined }) => la.id != exclude).map((launch: any) => ({
                    value: launch.id,
                    label: launch.name
                })) // formatData
                setMeta(res?.meta)
                if (page === 1) {
                    setLaunchOptions(formatData)
                } else {
                    setLaunchOptions((data) => [...data, ...formatData])
                }
            })
            .catch((error: any) => {
                notification.error({
                    message: error?.message,
                    description: error?.response?.data?.message
                })
            })
    }

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

    return (
        <InputAutoComplete
            loading={loading}
            name={name}
            label={label}
            placeholder={placeholder}
            defaultValue={initialOptions[0]?.value}
            options={launchOptions}
            onSelect={(value) => {
                if (onSelect) {
                    onSelect(value)
                }
            }}
            onChange={(value, item) => {
                if (onChange) onChange(value, item)
            }}
            isSearchable={true}
            onSearch={fetchLaunchs}
            onClear={() => {
                fetchLaunchs()
                if (onClear !== undefined) {
                    onClear()
                }
            }}
            disabled={statisticsStatus == 'loading'}
            onPopupScroll={fetchMoreLaunchs}
            clearIcon={<button><CloseCircleFilled /></button>}
            {...rest}
        />
    )
}

export default MasterLaunchs