/**
 * Official Type definitions for LemonadeJS plugins
 * https://lemonadejs.net
 */

declare function Timeline(el: HTMLElement, options?: Timeline.Options): Timeline.Instance;

declare namespace Timeline {
    interface Tag {
        text: string;
    }

    interface Item {
        /** The item main label text */
        title: string;
        /** The text displayed under the title */
        subtitle: string;
        /** The description of the item */
        description: string;
        /** The date of the item */
        date: string | Date;
        /** The color of border in the item, also influence bullets */
        borderColor: string;
        /** The style of border in the item */
        borderStyle: string;
    }

    interface Options {
        /** The data that the component will base to render */
        data?: Item[];
        /** The type of the Timeline */
        type?: "monthly" | string;
        /** The side that item texts will be aligned to */
        align?: "left" | "right" | "top" | "bottom" | string;
        /** The displayed message case no item is found */
        message?: string;
        /** The order the dates will follow, either ascendant or descendant */
        order?: 'asc' | 'desc' | undefined;
        /** The width of the container */
        width?: number;
        /** The height of the container */
        height?: number;
        /** Specifies the URL for fetching the data. */
        url?: string;
        /** Enable the remote functionality. Default: false */
        remote?: boolean;
        /** The function called when data is changed */
        onupdate?: (self: Object) => void;
    }

    interface Instance {
        /** The data that the component will base to render */
        data: Item[];
    }
}

export default Timeline;