AthenaFE/components/features/todos/AdminTodosTableControls.tsx

import { View } from "react-native";

import { TableControls } from "@/components/shared/TableControls";
import { AddTodoControls } from "@/components/features/todos/AddTodoControls";
import {
  CombinedFilterMenu,
  CombinedFilterSection,
} from "@/components/shared/filters/CombinedFilterMenu";
import {
  SelectedFilterChips,
  SelectedChip,
} from "@/components/shared/filters/SelectedFilterChips";
import {
  TodoStatus,
  TodoStatusLabels,
  TodoStatusColors,
} from "@/constants/todoStatusEnum";
import {
  PriorityStatus,
  PriorityStatusLabels,
} from "@/constants/priorityStatusEnum";
import { PriorityIndicator } from "@/components/ui/PriorityIndicator";

interface AdminTodoTableControlsProps {
  searchQuery: string;
  menuVisible: boolean;
  menuAnchor: { x: number; y: number };
  selectedStatuses: TodoStatus[];
  selectedPriorities: PriorityStatus[];
  onSearch: (query: string) => void;
  onMenuDismiss: () => void;
  onItemsPerPageChange: (value: number) => void;
  onSelectStatuses: (statuses: TodoStatus[]) => void;
  onSelectPriorities: (priorities: PriorityStatus[]) => void;
  onAddTodo: () => void;
  itemsPerPage: number;
}

export const AdminTodosTableControls = ({
  searchQuery,
  menuVisible,
  menuAnchor,
  selectedStatuses = [],
  selectedPriorities = [],
  onSearch,
  onMenuDismiss,
  onItemsPerPageChange,
  onSelectStatuses,
  onSelectPriorities,
  onAddTodo,
  itemsPerPage = 25,
}: AdminTodoTableControlsProps) => {
  const renderFilterComponent = () => {
    const sections: CombinedFilterSection[] = [];

    const statusOptions = Object.values(TodoStatus).map((status) => ({
      value: status,
      label: TodoStatusLabels[status],
      icon: (
        <View
          style={{
            width: 10,
            height: 10,
            borderRadius: 5,
            backgroundColor: TodoStatusColors[status],
          }}
        />
      ),
    }));

    sections.push({
      key: "status",
      title: "Status",
      options: statusOptions,
      selected: selectedStatuses,
      onChange: (values) => onSelectStatuses(values as TodoStatus[]),
    });

    const priorityOptions = Object.values(PriorityStatus).map((priority) => ({
      value: priority,
      label: PriorityStatusLabels[priority],
      icon: <PriorityIndicator priority={priority} />,
    }));

    sections.push({
      key: "priority",
      title: "Priority",
      options: priorityOptions,
      selected: selectedPriorities,
      onChange: (values) => onSelectPriorities(values as PriorityStatus[]),
    });

    const chips: SelectedChip[] = [];

    selectedStatuses.forEach((status) =>
      chips.push({
        key: `status-${status}`,
        label: TodoStatusLabels[status],
        onRemove: () =>
          onSelectStatuses(selectedStatuses.filter((s) => s !== status)),
      })
    );

    selectedPriorities.forEach((priority) =>
      chips.push({
        key: `priority-${priority}`,
        label: PriorityStatusLabels[priority],
        onRemove: () =>
          onSelectPriorities(selectedPriorities.filter((p) => p !== priority)),
      })
    );

    return (
      <CombinedFilterMenu 
        sections={sections} 
        showResetButton={true}
        onResetAll={() => {
          onSelectStatuses([]);
          onSelectPriorities([]);
        }}
      />
    );
  };

  const renderFilterChips = () => {
    const chips: SelectedChip[] = [];

    selectedStatuses.forEach((status) =>
      chips.push({
        key: `status-${status}`,
        label: TodoStatusLabels[status],
        onRemove: () =>
          onSelectStatuses(selectedStatuses.filter((s) => s !== status)),
      })
    );

    selectedPriorities.forEach((priority) =>
      chips.push({
        key: `priority-${priority}`,
        label: PriorityStatusLabels[priority],
        onRemove: () =>
          onSelectPriorities(selectedPriorities.filter((p) => p !== priority)),
      })
    );

    return chips.length > 0 ? <SelectedFilterChips chips={chips} /> : null;
  };

  const renderActionButtons = () => <AddTodoControls onAddTodo={onAddTodo} />;

  return (
    <TableControls
      searchQuery={searchQuery}
      menuVisible={menuVisible}
      menuAnchor={menuAnchor}
      searchPlaceholder="Search todos"
      onSearch={onSearch}
      onMenuDismiss={onMenuDismiss}
      onItemsPerPageChange={onItemsPerPageChange}
      itemsPerPage={itemsPerPage}
      renderFilterComponent={renderFilterComponent}
      renderFilterChips={renderFilterChips}
      renderActionButtons={renderActionButtons}
    />
  );
};