import React from 'react';
import { classNames, stateClassNames, States, nextId } from '../misc';
import { Card, CardBody, CardHeader } from '../card';

import { KendoComponent } from '../_types/component';
import { TILELAYOUT_FOLDER_NAME, TILELAYOUT_MODULE_NAME } from './constants';
export const TILELAYOUTITEM_CLASSNAME = `k-tilelayout-item`;

const states = [
    States.focus
];

const options = {};

export type KendoTileLayoutItemProps = {
    header?: React.ReactNode | string;
    body?: React.ReactNode;
    focus?: boolean;
    resize?: true | 'vertical' | 'horizontal';
    style?: React.CSSProperties;
};

const defaultOptions = {};

export const TileLayoutItem: KendoComponent<KendoTileLayoutItemProps & React.HTMLAttributes<HTMLSpanElement>> = (
    props: KendoTileLayoutItemProps & React.HTMLAttributes<HTMLSpanElement>
) => {
    const {
        header,
        body,
        focus,
        resize,
        style
    } = props;

    const titleId = nextId('tilelayout-title');

    return (

        <Card className={classNames(
            props.className,
            TILELAYOUTITEM_CLASSNAME,
            stateClassNames(TILELAYOUTITEM_CLASSNAME, {
                focus,
            }),
            {
                'k-resize': resize === true,
                'k-resize-x': resize === 'horizontal',
                'k-resize-y': resize === 'vertical'
            }
        )}
        style={style}
        role="listitem"
        aria-labelledby={titleId}
        tabIndex={0}
        aria-keyshortcuts="Enter"
        >
            {header &&
                React.isValidElement(header)
                ? <CardHeader className="k-tilelayout-item-header k-cursor-move"><div className="k-card-title" id={titleId}>{header}</div></CardHeader>
                : <CardHeader className="k-tilelayout-item-header k-cursor-move"><div className="k-card-title" id={titleId}>{header}</div></CardHeader>
            }
            {body &&
                <CardBody className="k-tilelayout-item-body">
                    {body}
                </CardBody>
            }
        </Card>
    );
};

TileLayoutItem.states = states;
TileLayoutItem.options = options;
TileLayoutItem.className = TILELAYOUTITEM_CLASSNAME;
TileLayoutItem.defaultOptions = defaultOptions;
TileLayoutItem.moduleName = TILELAYOUT_MODULE_NAME;
TileLayoutItem.folderName = TILELAYOUT_FOLDER_NAME;

export default TileLayoutItem;