import * as React from 'react'
import * as cx from 'classnames'

import { CardProps, RowShortcutProps } from '../interfaces'

import { ROW_SHORTCUT_PROPS } from '../constants'

import { Flex } from './flex'
import { Row } from './row'

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

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

    protected shortcutProps: RowShortcutProps = ROW_SHORTCUT_PROPS

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

        const { dragEventHandler } = this

        return (
            <div
                {...this.baseProps()}
                draggable={!disabled && draggable}
                onDragStart={dragEventHandler(onDragStart)}
                onDragEnd={dragEventHandler(onDragEnd)}
                onDragEnter={dragEventHandler(onDragEnter)}
                onDragLeave={dragEventHandler(onDragLeave)}
                onDragOver={dragEventHandler(onDragOver)}
                onDrop={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()
        }
}