import React from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';

export interface MoveItemsButtonPropType {
    isDisabled?: boolean;
    forward: boolean;
    message: string;
    onClickMoveTo: any;
    selectedCount: number;
}

export const MoveItemsButton: React.FC<MoveItemsButtonPropType> = ({
    isDisabled = false,
    forward,
    message,
    onClickMoveTo,
    selectedCount,
}) => (
    <div
        className={cx({
            'ItemList-MoveItemsButton': true,
            'ItemList-ButtonDisable': isDisabled,
        })}
        data-testid="ItemList-MoveItemsButton"
        onClick={isDisabled ? () => false : onClickMoveTo}
        onKeyDown={() => false}
    >
        {!forward && (
            <div className="ItemList-MoveItemsButton-Icons">
                <GlyphIcon name="chevronLeft" size={16} />
                <GlyphIcon name="chevronLeft" size={16} />
                <GlyphIcon name="chevronLeft" size={16} />
            </div>
        )}
        <div
            className="ItemList-MoveItemsButton-Text"
            data-testid="ItemList-MoveItemsButton-Text"
        >
            <span>Move Selected ({selectedCount}) to</span>
            <br />
            <span>{message}</span>
        </div>

        {forward && (
            <div className="ItemList-MoveItemsButton-Icons">
                <GlyphIcon name="chevronRight" size={16} />
                <GlyphIcon name="chevronRight" size={16} />
                <GlyphIcon name="chevronRight" size={16} />
            </div>
        )}
    </div>
);

export default MoveItemsButton;