/**
 * List of editable items.
 * Has sort, add and remove controls
 * Item has its own React.Node, which will be displayed in list.
 *
 * @author: Denis Makarov
 * @date: 2020-10-07
 */

import * as React from 'react';
import * as styles from './editableValuesList.m.scss';
import {IEditableListItemComponentProps, IValueListElement} from './EditableValuesList.types';
import {Button} from '../../component';
import {SIZE} from '../../constants';
import {safeInvoke} from '../..';

interface IProps {
    onOrderChange?: (id: string, moveUp: boolean) => void;
    onRemove: (itemId: string) => void;
    elements: IValueListElement [];
    extraItems: JSX.Element;
    showOrderControls: boolean;
}

const defaultProps = {
    showOrderControls: true
};

export {
    IValueListElement,
    IEditableListItemComponentProps
};

export class EditableValuesList extends React.Component<IProps> {
    static defaultProps = defaultProps;

    override render () {
        return (
            <div className={styles.listContainer}>
                {this.props.extraItems}
                <div className={styles.listItems}>
                    {this.props.elements.map((el: IValueListElement) => {
                        return (
                            <div className={styles.listItem} key={el.id}>
                                {el.node}
                                <div className={styles.buttonGroup}>
                                    {this.props.showOrderControls && (
                                        <Button
                                            leftIcon={'arrow-up'}
                                            isMinimal={true}
                                            isDisabled={!el.canMoveUp}
                                            onClick={() => safeInvoke(this.props.onOrderChange, el.id, true)}
                                            size={SIZE.SMALL}
                                        />
                                    )}
                                    {this.props.showOrderControls && (
                                        <Button
                                            leftIcon={'arrow-down'}
                                            isMinimal={true}
                                            isDisabled={!el.canMoveDown}
                                            onClick={() => safeInvoke(this.props.onOrderChange, el.id, false)}
                                            size={SIZE.SMALL}
                                        />
                                    )}
                                    <Button
                                        leftIcon={'trash2'}
                                        isMinimal={true}
                                        isDisabled={!el.canRemove}
                                        onClick={() => this.props.onRemove(el.id)}
                                        size={SIZE.SMALL}/>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
        );
    }
}