import React, {PureComponent} from 'react'
import PropTypes from "prop-types";
import {nbrOccupiedSlotsInCrate} from "./utils";

/**
 * Component that displays a placeholder inside crate.
 * Allows to display how it remains space for the current crate.
 */
export class FakePlaceholder extends PureComponent {

    static get propTypes() {
        return {
            isDraggingOver: PropTypes.bool,
            nbrSlots: PropTypes.number.isRequired,
            items: PropTypes.array.isRequired,
        };
    }

    render() {
        const {
            isDraggingOver,
            nbrSlots,
            items,
        } = this.props;

        const fakePlaceholder = [];
        const nbrOccupied = nbrOccupiedSlotsInCrate(items);

        for (var i = (nbrSlots - nbrOccupied); i > 0; i--) {
            fakePlaceholder.push(
                <div key={i} style={{
                    display: isDraggingOver ? 'none' : 'block',
                    border: '1px dashed #ccc',
                    width: '45px',
                    marginBottom: '5px',
                }}></div>
            );
        }

        return (
            <React.Fragment>
                {fakePlaceholder}
            </React.Fragment>
        );

    }
}