import * as React from "react";
import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
import CircularSlider from '@fseehawer/react-circular-slider';

// Cast to React Component to satisfy TypeScript

interface Continuous {
    enabled: boolean;
    clicks: number;
    interval: number;
}

type KnobPosition = 'top' | 'right' | 'bottom' | 'left';

interface CircularSliderProps extends FormElementProps<number> {
    width?: number;
    min?: number;
    max?: number;
    label?: string;
    knobPosition?: KnobPosition; // Fixed casing
    continuous?: Continuous; // Fixed spelling
}

function CircularSliderElement(props: CircularSliderProps): React.ReactElement {
    const {
        value,
        setValue,
        width = 280,
        min = 0,
        max = 360,
        label = "Value",
        knobPosition = 'top', // Fixed casing
        ...rest
    } = props;

    const handleChange = React.useCallback((newValue: string | number) => {
        setValue(typeof newValue === 'string' ? parseFloat(newValue) : newValue);
    }, [setValue]);

    return (
        <CircularSlider
            width={width}
            min={min}
            max={max}
            label={label}
            knobPosition={knobPosition} // Fixed casing
            onChange={handleChange}
            initialValue={value || 0}
            {...rest}
        />
    );
}

const CircularSliderElementRegistration: FormElementRegistration<CircularSliderProps> = {
    component: CircularSliderElement,
    id: "CircularSlider",
    getInitialProperties: () => ({
        value: 0,
        min: 0,
        max: 360,
        label: "Value",
        knobPosition: 'top', // Fixed casing
        width: 280
    })
};

export default CircularSliderElementRegistration;