import { City, DialogueInterface } from '@/types/city';
import React, { useState } from 'react';

interface Props {
  initialCities: {
    results: City[];
    totalResults: number;
  };
}

const useCity = (initialCities: Props) => {
  const [dialogueType, setDialogueType] = useState({ id: -1, type: '' } as DialogueInterface);

  const { data: cities } = useGetCitiesQuery();

  const methods = useForm({ defaultValues: { searchQuery: '' } });
  const { control, watch } = methods;
  const searchQuery = watch('searchQuery');

  const filteredCities = cities?.data?.results?.filter((city) =>
    city.name.toLowerCase().includes(searchQuery.toLowerCase()),
  );

  const totalRecords = cities?.data?.totalResults as number;

  const {
    currentPage,
    recordsPerPage,
    totalPages,
    startIndex,
    endIndex,
    handlePreviousPage,
    handleNextPage,
    handleRecordsPerPageChange,
  } = usePagination(totalRecords, 10);

  const currentRecords = filteredCities?.slice(startIndex, endIndex);

  const handleDeleteConfirm = async () => {
    if (!cityToDelete) return;
    try {
      setIsDeleteDialogOpen(false);
      setCityToDelete(null);
    } catch (error) {
      console.error('Delete failed:', error);
    }
  };

  const columns: TableColumn<City>[] = [
    {
      id: 'name',
      header: 'City Name',
      accessor: 'name',
      className: 'font-medium',
    },
    {
      id: 'state',
      header: 'State Name',
      accessor: 'state',
    },
  ];

  const actions = createCityActions(setEditingCity, setIsDialogOpen, setCityToDelete, setIsDeleteDialogOpen);

  return {};
};

export default useCity;