import { classNames, States, stateClassNames } from '../misc';
import { Icon } from '../icon';

import { KendoComponent } from '../_types/component';
import { SCHEDULER_FOLDER_NAME, SCHEDULER_MODULE_NAME } from './constants';
const className = 'k-event';

const states = [
    States.hover,
    States.focus,
    States.selected
];

const options = {};

const defaultOptions = {
    resizable: 'vertical',
    eventPrefix: <Icon icon="arrow-rotate-cw" />,
    eventSuffix: <><a className="k-link k-event-delete" aria-label="Delete event"><Icon icon="x" /></a></>
} as const;

export type KendoSchedulerEventProps = {
    inverse?: boolean;
    ongoing?: boolean;
    multiDay?: boolean;
    resizable?: "horizontal" | "vertical" | "none";
    hover?: boolean;
    focus?: boolean;
    selected?: boolean;
    eventPrefix?: React.JSX.Element | null;
    eventSuffix?: React.JSX.Element | null;
};

export const SchedulerEvent: KendoComponent<KendoSchedulerEventProps & React.HTMLAttributes<HTMLDivElement>> = (
    props: KendoSchedulerEventProps &
        React.HTMLAttributes<HTMLDivElement>
) => {
    const {
        inverse,
        ongoing,
        multiDay,
        resizable = defaultOptions.resizable,
        hover,
        focus,
        selected,
        eventPrefix = defaultOptions.eventPrefix,
        eventSuffix = defaultOptions.eventSuffix,
        ...others
    } = props;

    return (
        <div
            {...others}
            className={classNames(
                className,
                props.className,
                stateClassNames(className, {
                    hover,
                    focus,
                    selected
                }),
                {
                    'k-event-inverse': inverse,
                    'k-event-ongoing': ongoing,
                }
            )}
            role="button"
            aria-label={others['aria-label'] || 'Event'}
        >
            <span className="k-event-actions">
                {eventPrefix}
            </span>
            <div>
                {props.children}
            </div>
            <span className="k-event-actions">
                {eventSuffix}
            </span>
            {multiDay &&
            <>
                <span className="k-event-top-actions">
                    <Icon icon="chevron-up" />
                </span>
                <span className="k-event-bottom-actions">
                    <Icon icon="chevron-down" />
                </span>
            </>
            }
            {resizable === 'vertical' ?
                <>
                    <span className="k-resize-handle k-resize-n"></span>
                    <span className="k-resize-handle k-resize-s"></span>
                </> :
                resizable === 'horizontal' &&
                <>
                    <span className="k-resize-handle k-resize-w"></span>
                    <span className="k-resize-handle k-resize-e"></span>
                </>
            }
        </div>
    );
};

SchedulerEvent.states = states;
SchedulerEvent.options = options;
SchedulerEvent.defaultOptions = defaultOptions;
SchedulerEvent.className = className;
SchedulerEvent.moduleName = SCHEDULER_MODULE_NAME;
SchedulerEvent.folderName = SCHEDULER_FOLDER_NAME;

export default SchedulerEvent;