import { ReactNode } from "react";
import { View } from "react-native";

import { SearchBar } from "@/components/ui/SearchBar";
import { ItemsPerPageMenu } from "@/components/shared/ItemsPerPageMenu";
import { SizeEnum } from "@/constants/sizeEnum";

interface DesktopTableControlsProps {
  searchQuery: string;
  menuVisible: boolean;
  menuAnchor: { x: number; y: number };
  searchPlaceholder?: string;
  onSearch: (query: string) => void;
  onMenuDismiss: () => void;
  onItemsPerPageChange: (value: number) => void;
  itemsPerPage?: number;
  renderFilterComponent?: () => ReactNode;
  renderFilterChips?: () => ReactNode;
  renderActionButtons?: () => ReactNode;
  itemsPerPageMenuOptions?: number[];
}

export const DesktopTableControls = ({
  searchQuery,
  menuVisible,
  menuAnchor,
  searchPlaceholder = "Search",
  onSearch,
  onMenuDismiss,
  onItemsPerPageChange,
  itemsPerPage = 25,
  renderFilterComponent,
  renderFilterChips,
  renderActionButtons,
  itemsPerPageMenuOptions,
}: DesktopTableControlsProps) => {
  return (
    <>
      <View className="flex-row items-center justify-between mb-2" style={{ height: 40 }}>
        <View className="flex-row items-center flex-1">
          <View className="flex-1 max-w-[250px]">
            <SearchBar
              placeholderText={searchPlaceholder}
              searchQuery={searchQuery}
              onChange={onSearch}
              size={SizeEnum.Small}
            />
          </View>
          {renderFilterComponent && (
            <View className="ml-2">{renderFilterComponent()}</View>
          )}
        </View>

        <View className="flex-row items-center ml-4">
          {renderActionButtons && <View>{renderActionButtons()}</View>}
          <ItemsPerPageMenu
            menuVisible={menuVisible}
            menuAnchor={menuAnchor}
            onDismiss={onMenuDismiss}
            onItemsPerPageChange={onItemsPerPageChange}
            totalItems={itemsPerPage}
            itemsPerPageMenuOptions={itemsPerPageMenuOptions || [25, 50, 100]}
          />
        </View>
      </View>

      {renderFilterChips && <View className="">{renderFilterChips()}</View>}
    </>
  );
};