import * as React from 'react'
import * as cx from 'classnames'
import { StylableComponent } from '../theme'
import { CardProps } from './interfaces'
import { Flex } from '../flex'

const styles = require('../../../src/components/card/styles.scss')

export class Card extends Flex<CardProps>  {
    public static defaultProps: CardProps = {
        direction: 'column',
        justify: 'flex-start',
        fullWidth: true,
    }

    public render(): JSX.Element {
        const {
            disabled,
            children,
            draggable,
            onDragStart,
            onDragEnd,
            onDragEnter,
            onDragLeave,
            onDragOver,
            onDrop,
            onDoubleClick,
        } = this.props;

        return (
            <div
                {...this.baseProps()}
                draggable={!disabled && draggable}
                onDragStart={this.dragEventHandler(onDragStart)}
                onDragEnd={this.dragEventHandler(onDragEnd)}
                onDragEnter={this.dragEventHandler(onDragEnter)}
                onDragLeave={this.dragEventHandler(onDragLeave)}
                onDragOver={this.dragEventHandler(onDragOver)}
                onDrop={this.dragEventHandler(onDrop)}
                onDoubleClick={onDoubleClick}>
                {children}
            </div>
        )
    }

    protected classNames(): string {
        const { active, selected, invalid, dropTarget, disabled } = this.props
        return cx(super.classNames(), styles.card, {
            [styles.active]: active,
            [styles.selected]: selected,
            [styles.invalid]: invalid,
            [styles.dropTarget]: dropTarget,
            [styles.disabled]: disabled,
        })
    }

    private dragEventHandler = (callback: ((e: React.DragEvent<any>) => any) | undefined) =>
        (e: React.DragEvent<any>) => {
            if (callback && !this.props.disabled) return callback(e)
            e.preventDefault()
        }
}