import React, { useState } from "react";
import Button from "@mui/material/Button";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
import {
	ArrowDownwardOutlined,
	ArrowUpwardOutlined,
	FilterAltOutlined,
	FilterOutlined,
	OutboxOutlined,
	OutboxRounded,
} from "@mui/icons-material";

const transitions = [
	{ from: null, to: "asc" },
	{ from: "asc", to: "desc" },
	{ from: "desc", to: null },
];

export const Sorting = ({ column, onSort }) => {
	const [direction, setDirection] = useState(null);

	const handleChangeDirection = () => {
		setDirection(transitions.find((x) => x.from === direction).to || "asc");
		onSort({
			field: column.name,
			direction,
		});
	};

	return (
		<Button
			size="small"
			onClick={() => handleChangeDirection()}
			endIcon={
				direction === "asc" ? (
					<ArrowUpwardOutlined fontSize="inherit" />
				) : direction === "desc" ? (
					<ArrowDownwardOutlined fontSize="inherit" />
				) : (
					<FilterAltOutlined fontSize="inherit" />
				)
			}
		>
			asdf
		</Button>
	);
};
