import React from 'react';
import styled from 'styled-components';

import { IconButton } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const StyledAudienceSort = styled.span`
	display: flex;
	flex-direction: row;
	align-items: center;

	.audience-sort-order {
		&__number {
			font-weight: bold;
			flex: 1;
		}
		&__controls {
			flex: 1;
			button {
				padding: 3px;
			}
		}
		&__up {
			margin-bottom: 2px;
		}
	}
`;

interface Props {
	index: number;
	canMoveUp: boolean;
	canMoveDown: boolean;
	onMoveUp: () => void;
	onMoveDown: () => void;
}

/**
 * The audience sort buttons component.
 *
 * @param {Object} props Component props.
 * @returns {React.ReactNode} Audience sorting component.
 */
const AudienceSort = ( props: Props ) => {
	const {
		canMoveDown,
		canMoveUp,
		index,
		onMoveDown,
		onMoveUp,
	} = props;

	return (
		<StyledAudienceSort className="audience-sort-order">
			<span className="audience-sort-order__number">{ index + 1 }</span>
			<span className="audience-sort-order__controls">
				<IconButton
					className="audience-sort-order__up"
					disabled={ ! canMoveUp }
					icon="arrow-up-alt2"
					label={ __( 'Move up', 'altis' ) }
					onClick={ onMoveUp }
				/>
				<IconButton
					className="audience-sort-order__down"
					disabled={ ! canMoveDown }
					icon="arrow-down-alt2"
					label={ __( 'Move down', 'altis' ) }
					onClick={ onMoveDown }
				/>
			</span>
		</StyledAudienceSort>
	);
};

export default AudienceSort;