import React, { useState } from 'react';
import InputAutoComplete from '@/components/form/InputAutoComplete';
import { getCities } from '@/app/cities/service';
import { notification } from 'antd';
import type { ListMeta } from '@/interfaces/common';
import { useSession } from 'next-auth/react';

interface CityDropdownProps {
    onSelect?: (value: number | string) => void
    onChange?: (
        value: string | number,
        item:
          | { value: number | string; label: React.ReactNode }
          | Array<{ value: number | string; label: React.ReactNode }>
    ) => void
    filter?: {
        status?: string
    }
    name?: string
    label?: string
    mode?: 'multiple' | undefined;
    placeholder?: string
    onClear?: () => void
    [key: string]: unknown
}

const MasterCities: React.FC<CityDropdownProps> = ({
  filter = {},
  onSelect,
  onClear,
  name = 'city_id',
  label,
  mode,
  placeholder = 'City',
  onChange,
  ...rest
}) => {
  // const [cityOptions, setCityOptions] = useState<Array<{ value: number | string; label: string }>
  //   >([]);
const [cityOptions, setCityOptions] = useState<
  Array<{ value: number | string; label: React.ReactNode }>
>([]);
  const { data: session } = useSession();
  const userCities = session?.user?.cities;

  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 fetchCities = (search?: string, page: number = 1): void => {
    setSearchQuery(search ?? '');
    if (userCities && userCities.length) {
      const formatData = userCities?.map((city) => ({
        value: city?.city_id,
        label: city?.city_name,
      })); // formatData
      setCityOptions(formatData);
    } else {
      getCities({ ...filter, search, page, is_default: true, sortColumn: 'name', sortOrder: 'asc' })
        .then((res) => {
          setLoading(false);
          const formatData = res?.data?.data?.map((city: { id: string; name: string; }) => ({
            value: city?.id,
            label: city?.name,
          })); // formatData
          setMeta(res?.data?.meta);
          if (page === 1) {
            setCityOptions(formatData);
          } else {
            setCityOptions((data) => [...data, ...formatData]);
          }
        })
        .catch((error) => {
          notification.error({
            message: error?.message,
            description: error?.response?.data?.message,
          });
        });
    }

  };

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

  return (
    <InputAutoComplete
      loading={loading}
      name={name}
      label={label}
      mode={mode}
      placeholder={placeholder}
      onChange={(value, item) => {
        if (onChange) {
          onChange(value, item);
        }
      }}
      options={cityOptions}
      onSelect={(value) => {
        if (onSelect) {
          onSelect(value);
        }
      }}
      isSearchable={true}
      onSearch={fetchCities}
      onClear={() => {
        fetchCities();
        if (onClear !== undefined) {
          onClear();
        }
      }}
      handleLoadMore={fetchMoreCities}
      {...rest}
    />
  );
};

export default MasterCities;