import React from 'react';
import { BarChart, Bar, XAxis, YAxis } from 'recharts';
import { DragSource, DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

// 드래그 앤 드롭 가능한 타입 설정
const ItemTypes = {
  CHART: 'chart'
};

// 드래그 소스 설정
const chartSource = {
  beginDrag(props) {
    return {
      index: props.index
    };
  }
};

// 드롭 타겟 설정
const chartTarget = {
  drop(props, monitor) {
    const dragIndex = monitor.getItem().index;
    const hoverIndex = props.index;
    props.moveChart(dragIndex, hoverIndex);
  }
};

// 드래그 앤 드롭 가능한 차트 컴포넌트
const DraggableChart = ({ x, y, width, height, isDragging, connectDragSource, connectDropTarget }) => (
  connectDragSource(
    connectDropTarget(
      <div style={{ opacity: isDragging ? 0.5 : 1 }}>
        <BarChart width={width} height={height} data={data}>
          <XAxis dataKey="name" />
          <YAxis />
          <Bar dataKey="value" fill="#8884d8" />
        </BarChart>
      </div>
    )
  )
);

const dragSource = DragSource(ItemTypes.CHART, chartSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging()
}));

const dropTarget = DropTarget(ItemTypes.CHART, chartTarget, connect => ({
  connectDropTarget: connect.dropTarget()
}));

export default dropTarget(dragSource(DraggableChart));