import { View } from "react-native";

import { TableControls } from "@/components/shared/TableControls";
import { SelectionControls } from "@/components/features/users/SelectionControls";
import { RiskEnum, RiskLabels } from "@/constants/riskEnum";
import {
  CombinedFilterMenu,
  CombinedFilterSection,
} from "@/components/shared/filters/CombinedFilterMenu";
import {
  SelectedFilterChips,
  SelectedChip,
} from "@/components/shared/filters/SelectedFilterChips";
import { RiskIndicator } from "@/components/ui/RiskIndicator";
import { Button } from "@/components/ui/Button";

interface UserTableControlsProps {
  searchQuery: string;
  selectAll?: boolean;
  selectedItems?: string[];
  menuVisible: boolean;
  menuAnchor: { x: number; y: number };
  selectedRisks?: RiskEnum[];
  onSearch: (query: string) => void;
  onSelectAll: () => void;
  onBulkDelete: () => void;
  onMenuDismiss: () => void;
  onItemsPerPageChange: (value: number) => void;
  onSelectRisks: (risks: RiskEnum[]) => void;
  itemsPerPage?: number;
  onAddUser: () => void;
  onAddingUser: boolean;
}

export const UserTableControls = ({
  searchQuery,
  selectAll = false,
  selectedItems = [],
  menuVisible,
  menuAnchor,
  selectedRisks = [],
  onSearch,
  onSelectAll,
  onBulkDelete,
  onMenuDismiss,
  onItemsPerPageChange,
  onSelectRisks,
  itemsPerPage = 25,
  onAddUser,
  onAddingUser = false,
}: UserTableControlsProps) => {
  const renderFilterComponent = () => {
    const riskOptions = Object.values(RiskEnum).map((risk) => ({
      value: risk,
      label: RiskLabels[risk],
      icon: <RiskIndicator risk={risk} />,
    }));

    const sections: CombinedFilterSection[] = [];

    sections.push({
      key: "risk",
      title: "Risk",
      options: riskOptions,
      selected: selectedRisks,
      onChange: (values) => onSelectRisks(values as RiskEnum[]),
    });

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

  const renderFilterChips = () => {
    const chips: SelectedChip[] = selectedRisks.map((risk) => ({
      key: `risk-${risk}`,
      label: RiskLabels[risk],
      onRemove: () =>
        onSelectRisks(
          selectedRisks.filter((selectedFilter) => selectedFilter !== risk)
        ),
    }));

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

  const renderActionButtons = () => {
    return (
      <View className="flex-row items-center">
        {onAddUser ? (
          <View className="mr-2">
            <Button
              onPress={onAddUser}
              disabled={onAddingUser}
              icon="account-plus-outline"
              buttonColor="#6750a4"
              buttonTextColor="white"
            >
              Add User
            </Button>
          </View>
        ) : null}
        <SelectionControls
          selectAll={selectAll}
          selectedUsers={selectedItems}
          onSelectAll={onSelectAll}
          onBulkDelete={onBulkDelete}
        />
      </View>
    );
  };

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