import React from "react";
import { IconAction } from "@ax/components";

import * as S from "./style";

const ReorderArrows = (props: IReorderArrows): JSX.Element => {
	const { index, listLength, handleUpClick, handleDownClick } = props;

	const showReorderArrows = listLength > 1;
	const isLast = index + 1 === listLength;
	const isFirst = index === 0;

	const Arrows = () => (
		<>
			{!isFirst && (
				<S.ReorderArrow data-testid="reorder-last" setMargin={isLast}>
					{" "}
					<IconAction icon="FullArrowUp" size="s" onClick={handleUpClick} />{" "}
				</S.ReorderArrow>
			)}
			{!isLast && (
				<S.ReorderArrow data-testid="reorder-first">
					{" "}
					<IconAction icon="FullArrowDown" size="s" onClick={handleDownClick} />{" "}
				</S.ReorderArrow>
			)}
		</>
	);

	return <>{showReorderArrows && <Arrows />}</>;
};

export interface IReorderArrows {
	index: number;
	listLength: number;
	handleUpClick: (e: any) => void;
	handleDownClick: (e: any) => void;
}

export default ReorderArrows;
