import React, { useState } from 'react';
import InputAutoComplete from '@/components/form/InputAutoComplete';
import { getLeadRequestLaunchs } from '@/app/launches/service';
import { notification } from 'antd';
import type { ListMeta } from '@/interfaces/common';
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]: unknown
}
const MasterCreateLeadRequestLaunchs: 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 fetchLaunchs = (search?: string, page: number = 1): void => {
    setSearchQuery(search ?? '');
    setLoading(true);
    getLeadRequestLaunchs({ search, page })
      .then((res) => {
        setLoading(false);
        const formatData = res?.data?.filter((la: { id: string | undefined }) => la.id != exclude).map((launch: { id: string; name: string; }) => ({
          value: launch.id,
          label: launch.name,
        })); // formatData
        setMeta(res?.meta);
        if (page === 1) {
          setLaunchOptions(formatData);
        } else {
          setLaunchOptions((data) => [...data, ...formatData]);
        }
      })
      .catch((error) => {
        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();
        }
      }}
      onPopupScroll={fetchMoreLaunchs}
      {...rest}
    />
  );
};

export default MasterCreateLeadRequestLaunchs;