import React from "react";

import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";

import * as S from "./style";

const OrderFilter = (props: IStatusFilterProps) => {
	const { sortItems, isAscending } = props;

	const sortOldest = () => sortItems(true);
	const sortMostRecent = () => sortItems(false);

	const SortedStateArrow = () =>
		isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;

	const Header = () => (
		<S.Status data-testid="status-filter-header">
			Time
			<S.IconsWrapper>
				{isAscending ? (
					<SortedStateArrow />
				) : (
					<S.InteractiveArrow data-testid="status-filter-interactive-arrow">
						<Icon name="DownArrow" size="16" />
					</S.InteractiveArrow>
				)}
			</S.IconsWrapper>
		</S.Status>
	);

	return (
		<FloatingMenu Button={Header} position="center">
			<ListTitle>Sort by time</ListTitle>
			<ListItem isSelected={!isAscending} onClick={sortMostRecent}>
				Most recent
			</ListItem>
			<ListItem isSelected={isAscending} onClick={sortOldest}>
				Oldest
			</ListItem>
		</FloatingMenu>
	);
};

export interface IStatusFilterProps {
	isAscending: boolean;
	sortItems(isAscendent: boolean): void;
}

export default OrderFilter;
