'use strict'

import React, { Component, PropTypes } from 'react';
import { DropTarget } from 'react-dnd';
import StationSpot from './station-spot';

const heatmapTarget = {
    drop(props, monitor) {
        //get item from station-spot.js
        //item:{deployed, rect, spotInlist, info}
        const item = monitor.getItem();
        const move = monitor.getDifferenceFromInitialOffset();
        props.onDeploySpot({ ...item, move });
    }
};

function collect(connect, monitor) {
    return {
        connectDropTarget: connect.dropTarget(),
        isOver: monitor.isOver()
    };
}

class Heatmap extends React.Component {
    componentDidMount() {

    }

    renderSpots() {
        const { width, height, spots, onRemoveSpot } = this.props;
        return spots.map(s => <StationSpot key={s.sensorId} info={s}
            size={{ "width": width, "height": height }}
            onRemoveSpot={onRemoveSpot} />);
    }

    render() {
        const { connectDropTarget, height, width, image } = this.props;

        let targetStyle = {
            position: 'relative',
            width: width,
            // overflow:'hidden',
            height: height,
            background: `url("/_file-server/${image}") no-repeat`,
            backgroundSize: '100% 100%',
        };

        return connectDropTarget(
            <div id="dragTarget" style={targetStyle}>
                {this.renderSpots()}
            </div>
        )
    }
}

export default DropTarget('stationSpot', heatmapTarget, collect)(Heatmap);