import * as React from "react";
import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
import { LineChart } from "@mui/x-charts";

/**
 * 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 LineChartMuiProps extends FormElementProps<string> {
    series: any;
    xAxis: any;
    yAxis: any;
    width: any;
    height: any;
    chartSetting: any
}

/**
 * A Workflow element built using React.
 * @displayName LineChartMui
 * @description Line Chart V1
 * @param props The props that will be provided by the Workflow runtime.
 */
function LineChartMui(props: LineChartMuiProps): React.ReactElement {
    const { series, xAxis, yAxis, width, height ,chartSetting} = props;
    return (
        <div style={{ width, height }}>
            <LineChart
                series={series}
                xAxis={xAxis}
                yAxis={yAxis}
                {...chartSetting}
            />
        </div>
    );
}

const LineChartMuiElementRegistration: FormElementRegistration<LineChartMuiProps> = {
    component: LineChartMui,
    getInitialProperties: () => ({ value: "Hello World" }),
    id: "LineChartMui",
};

export default LineChartMuiElementRegistration;