import { Ionicons } from "@expo/vector-icons";
import { View } from "react-native";
import { DataTable, Text } from "react-native-paper";

import { TableSortDirection } from "@/constants/tableSortDirectionEnum";

interface SortableHeaderProps {
  title: string;
  column: string;
  sortColumn: string | null;
  sortDirection: TableSortDirection;
  onSort: (column: string) => void;
  centerAlign?: boolean;
  style?: any;
}

export const SortableHeader = ({
  title,
  column,
  sortColumn,
  sortDirection,
  onSort,
  centerAlign = false,
  style,
}: SortableHeaderProps) => {
  return (
    <DataTable.Title
      style={{
        justifyContent: centerAlign ? "center" : "flex-start",
        ...style,
      }}
      onPress={() => onSort(column)}
    >
      <View
        style={{
          flexDirection: "row",
          alignItems: "center",
          justifyContent: centerAlign ? "center" : "flex-start",
        }}
      >
        <Text style={{ marginRight: 4, fontSize: 14 }}>
          {sortColumn === column ? (
            sortDirection === TableSortDirection.ASCENDING ? (
              <Ionicons name="arrow-up" size={20} color="black" />
            ) : (
              <Ionicons name="arrow-down" size={20} color="black" />
            )
          ) : (
            <Ionicons name="swap-vertical-outline" size={20} color="black" />
          )}
        </Text>
        <Text>{title}</Text>
      </View>
    </DataTable.Title>
  );
};