import React from 'react'
import { DragSource } from 'react-dnd'
import cx from 'classnames'
import { IDENT_COURSE } from '../../../object-student/item-types'
import CourseWithModal from './with-modal'

type PropTypes = {
    className?: string,
    connectDragSource: () => any, // react-dnd
    isDragging: boolean, // react-dnd
};

class DraggableCourse extends React.PureComponent {
    props: PropTypes;

    render() {
        const classSet = cx(this.props.className, {
            'is-dragging': this.props.isDragging,
        })

        return this.props.connectDragSource(
            <div>
                <CourseWithModal className={classSet} {...this.props} />
            </div>
        )
    }
}

// Implements the drag source contract.
const courseSource = {
    beginDrag(props) {
        let scheduleId = props.scheduleId || null
        return {
            isFromSchedule: scheduleId !== null,
            isFromSearch: scheduleId === null,
            clbid: props.course.clbid,
            groupid: props.course.groupid,
            fromScheduleId: scheduleId,
        }
    },
}

// Specifies the props to inject into your component.
function collect(connect, monitor) {
    return {
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging(),
    }
}

export default DragSource(IDENT_COURSE, courseSource, collect)(DraggableCourse)

@@ -19,16 +19,55 @@
 'react'%0A
+import styled from 'styled-components'%0A
 import %7B
@@ -97,16 +97,16 @@
 ct-dnd'%0A
-
 import c
@@ -367,16 +367,107 @@
 dnd%0A%7D;%0A%0A
+const Draggable = styled(CourseWithModal)%60%0A    &:hover %7B%0A        cursor: pointer;%0A    %7D%0A%60%0A%0A
 class Dr
@@ -742,31 +742,25 @@
        %3C
-CourseWithModal
+Draggable
  classNa

add cursor:pointer to draggable