import * as React from "react";
import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
import { Timeline as MainTimeLine, Text } from '@mantine/core';
import { MantineProvider } from '@mantine/core';


/**
 * The generic type argument provided to `FormElementProps<T>` controls the type
 * of `props.value` and `props.setValue(value)`. If your element doesn't need a
 * `value`, you can omit the type argument.
 *
 * You can also declare additional public properties of your element by adding
 * properties to this interface. The properties will be managed by the Workflow
 * runtime, and passed in as `props`. You can update the properties by using
 * `props.setProperty(key, value)`.
 */

interface TimelineItem {
    title: string;
    description: string;
    time: string;
    lineVariant?: "dashed" | "solid";
}

interface TimelineProps extends FormElementProps<string> {
    itemDetails: TimelineItem[];
    iconSize: number,
    lineWidth: number;
    active: number,
    color: string,
    reverseActive: boolean,
}

/**
 * A Workflow element built using React.
 * @displayName Timeline
 * @description Timeline
 * @param props The props that will be provided by the Workflow runtime.
 */
function Timeline(props: TimelineProps): React.ReactElement {
    const { itemDetails,iconSize,lineWidth,active,color,reverseActive } = props;
    iconSize * 0.6
    return (
        <MantineProvider>
            <MainTimeLine active={active} bulletSize={iconSize} lineWidth={lineWidth} color={color} reverseActive={reverseActive}>

                {itemDetails.map((item, index) => {
                    
                    return (
                    
                    <MainTimeLine.Item
                        key={index}
                        title={item.title}
                        lineVariant={item.lineVariant}
                    >
                        
                        {item.description ? <Text c="dimmed" size="sm">{item.description}</Text> : undefined}
                        {item.time ? <Text size="xs" mt={4}>{item.time}</Text> : undefined}
                        
                    </MainTimeLine.Item>
                )})}
            </MainTimeLine>

        </MantineProvider>
    );
}

const TimelineElementRegistration: FormElementRegistration<TimelineProps> = {
    component: Timeline,
    getInitialProperties: () => ({
        value: "Hello World",
        lineWidth: 1,
        iconSize: 40,
        active: 2,
        color:'var(--buttonIcon)',
        reverseActive: true,
        itemDetails: [
            {
                title: "New branch",
                description: "You've created new branch fix-notifications from master",
                time: "2 hours ago",
            },
            {
                title: "Commits",
                description: "You've pushed 23 commits to fix-notifications branch",
                time: "52 minutes ago",
            },
            {
                title: "Pull request",
                description: "You've submitted a pull request Fix incorrect notification message (#187)",
                time: "34 minutes ago",
                lineVariant: "dashed",
            },
            {
                title: "Code review",
                description: "Robert Gluesticker left a code review on your pull request",
                time: "12 minutes ago",
            },
        ],
    }),
    id: "Timeline",
};

export default TimelineElementRegistration;