import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { ProductPiece } from '../ProductPiece'
import { SeparateDropProps, EventTransition } from './typings'
import {
  StyledDraggableWrapper,
  PlaceholderWrapper,
  Placeholder,
} from './styled'
import { variantConfig } from '../fixture'

import { SeperateDropState } from './state'

@observer
export default class SeparateDrop extends React.Component<SeparateDropProps> {
  observableState = new SeperateDropState()

  handleDragOver = () => {
    if (!this.observableState.isDragging) {
      this.props.onDragOver(this.props.value)
    }
  }

  handleDragStart = (props: EventTransition) => {
    this.observableState.setInstance({
      isDragging: true,
    })
  }

  handleOnDrag = (props: EventTransition) => {
    this.observableState.setInstance({
      isDragging: true,
    })
  }

  handleDragEnd = () => {
    this.observableState.setInstance({
      isDragging: false,
    })

    if (this.props.onDragEnd) {
      this.props.onDragEnd(this.props.value, this.props.isFilter)
    }
  }

  render() {
    const { isDragging } = this.observableState
    const { item, children } = this.props
    return (
      <StyledDraggableWrapper
        onMouseDown={this.handleDragStart}
        draggable
        onDragStart={this.handleDragStart}
        onDrag={this.handleOnDrag}
        isDragging={isDragging}
        onDragOver={this.handleDragOver}
        onDragEnd={this.handleDragEnd}
        row={item && variantConfig[item.variant].row}
        column={item && variantConfig[item.variant].column}
      >
        {children}
      </StyledDraggableWrapper>
    )
  }
}

export { SeparateDrop }