import React, { useState } from 'react'
import InputAutoComplete from '@/components/form/InputAutoComplete'
import { getCustomer } from '@/app/customer/service'
import { notification } from 'antd'
import type { ListMeta } from '@/interfaces/common'

interface CustomerDropdownProps {
    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
    onClear?: () => void
    [key: string]: any
}

const MasterCustomers: React.FC<CustomerDropdownProps> = ({
    name = 'customer_id',
    onClear,
    label,
    placeholder = 'Please Select Customer',
    onSelect,
    onChange,
    ...rest
}) => {
    const [customerOptions, setCustomerOptions] = 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 fetchCustomers = (search?: string, page: number = 1): void => {
        setSearchQuery(search ?? '')
        getCustomer({ search, page })
            .then((res: any) => {
                setLoading(false)
                const formatData = res?.data.data.map((customer: any) => ({
                    value: customer.id,
                    label: customer.name
                })) // formatData
                setMeta(res?.data.meta)
                if (page === 1) {
                    setCustomerOptions(formatData)
                } else {
                    setCustomerOptions((data) => [...data, ...formatData])
                }
            })
            .catch((error: any) => {
                notification.error({ message: error?.message })
                setLoading(false)
            })
    }

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

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

export default MasterCustomers