import React, { forwardRef, useImperativeHandle, useState } from 'react';
import InputAutoComplete from '@/components/form/InputAutoComplete';
import { getLaunchProjects } from '@/app/launches/service';
import { notification } from 'antd';
import type { ListMeta } from '@/interfaces/common';

interface options {
    value: number | string
    label: string
}

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

export interface MasterLaunchProjectsProps extends LaunchProjectDropdownProps {
    reload?: (filter: any) => void
}

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

    const fetchProjects = (search: string = '', page: number = 1, launch_id?: number): void => {
      const currentLaunchId = launch_id ?? launchId;
      if (!currentLaunchId) return;
      setSearchQuery(search);
      setLoading(true);
      getLaunchProjects(currentLaunchId, { search, page })
        .then((res: any) => {
          setLoading(false);
          const formatData = res?.data?.map((project: any) => ({
            value: project.project_id,
            label: project.project_name,
          }));
          setMeta(res?.meta);
          if (page === 1) {
            setProjectOptions(formatData ?? []);
          } else {
            setProjectOptions((data) => [...data, ...(formatData ?? [])]);
          }
        })
        .catch((error: any) => {
          setLoading(false);
          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);
      }
    };

    // Expose the reload method using useImperativeHandle
    useImperativeHandle(
      ref,
      () => ({
        reload: async(launch_id: number = 0) => {
          setLaunchId(launch_id || undefined);
          if (launch_id) {
            fetchProjects('', 1, launch_id);
          } else {
            setProjectOptions([]);
          }
        },
        filterOptions: async(filterOptions: (options: options[]) => options[]) => {
          await setProjectOptions(filterOptions);
        },
      }),
      [launchId]
    );

    return (
      <InputAutoComplete
        loading={loading}
        name={name}
        label={label}
        placeholder={placeholder}
        rules={[{ required: true, message: 'Please Select Project!' }]}
        options={projectOptions}
        onSelect={(value) => {
          if (onSelect) {
            onSelect(value);
          }
        }}
        onChange={(value, item) => {
          if (onChange) {
            onChange(value, item);
          }
        }}
        isSearchable={true}
        onSearch={(search: string) => fetchProjects(search, 1)}
        onClear={() => {
          fetchProjects('', 1);
          if (onClear !== undefined) {
            onClear();
          }
        }}
        handleLoadMore={fetchMoreProjects}
        {...rest}
      />
    );
  }
);

MasterLaunchProjects.displayName = 'MasterLaunchProjects';
export default MasterLaunchProjects;