import React from 'react';
import PropTypes from 'prop-types';
import styles from './FloorControl.styl';
import DeleteArea from './FloorControl.DeleteArea';
import FloorButton from './FloorControl.FloorButton';

export default class FloorControl extends React.Component {

  constructor(props) {
    super(props);
    this.markMovingFloorForDeletion = this.markMovingFloorForDeletion.bind(this);
  }

  markMovingFloorForDeletion() {
    this.setState({
      // eslint-disable-next-line react/no-unused-state
      movingFloorMarkedForDeletion: true
    });
  }

  render() {
    const { children, showDeleteArea, markForDeletion } = this.props;
    // Below we recalculate the order, taking into account a possible in-progress floor-moving operation.
    // We do not want to change the render-order of FloorButton while a floor is being moved,
    // because this will prevent us from animating the FloorButtons moving around.
    return (
      <ul className={styles.floorControl}>
        {showDeleteArea && (
          <DeleteArea
            markForDeletion={markForDeletion}
          />
        )}
        {children}
      </ul>
    );
  }
}

FloorControl.Button = FloorButton;


FloorControl.propTypes = {
  children: PropTypes.node.isRequired,
  showDeleteArea: PropTypes.bool,
  markForDeletion: PropTypes.func
};

FloorControl.defaultProps = {
  showDeleteArea: undefined,
  markForDeletion: undefined
};