import * as React from "react";
import { MantineProvider } from '@mantine/core';
import { FormElementProps, FormElementRegistration  } from "@vertigis/workflow";
import { ColorInput, ColorPicker } from '@mantine/core';
import type { ColorFormat } from "@mantine/core/lib/components/ColorPicker/ColorPicker.types";

import "@mantine/core/styles.css";

import Color from "esri/Color";


declare module "@vertigis/workflow" {
    interface FormElementSettableProps<> {
        esriColor?: Color
    }
}

// Define a type that includes both the base props and your custom props
interface CsColorPickerV2Props extends FormElementProps<string> {
    description?: string;
    placeholder?: string;
    defaultValue?: string;
    swatches?: string[];
    swatchesPerRow: number;
    componentType: string;
    colorType: ColorFormat;
    colorPickerSize?: "xs" | "sm" | "md" | "lg" | "xl";
}

/**
 * A Workflow element built using React.
 * @displayName New Color Picker
 * @description New Color Picker V1
 * @param props The props that will be provided by the Workflow runtime.
 */
function CsColorPickerV2(props: CsColorPickerV2Props): React.ReactElement {
    const { 
        setProperty, 
        placeholder,
        colorPickerSize, 
        description, 
        defaultValue,
        colorType, 
        setValue, 
        raiseEvent, 
        value, 
        swatches, 
        swatchesPerRow, 
        componentType
    } = props;

    const handleChange = (color: string) => {
        let esriColor: Color;

        if (color.startsWith("rgb")) {
            const values = color
                .replace(/^rgba?\(|\s+|\)$/g, '')
                .split(",")
                .map(val => parseFloat(val.trim()));

            esriColor = new Color([
                values[0] || 0,    // r
                values[1] || 0,    // g
                values[2] || 0,    // b
                values[3] !== undefined ? values[3] : 1  // a
            ]);
            
        } else if (color.startsWith("#")) {
            // Handle Hex format
            esriColor = new Color(color);
        } else {
            // Handle named colors or other formats
            esriColor = new Color(color);
        }

        setProperty("esriColor", esriColor);
        setValue(color);
        raiseEvent("changed", color);
    };

    return (
        <MantineProvider withStaticClasses withGlobalClasses classNamesPrefix="ebta-mantime">
            {componentType === "ColorInput" ? (
                <ColorInput
                    swatches={swatches? swatches : undefined}
                    swatchesPerRow={swatches ? swatchesPerRow : undefined}
                    value={value}
                    size={colorPickerSize}
                    onChange={handleChange}
                    description={description ? description : undefined}
                    placeholder={placeholder ? placeholder : undefined}
                    format={colorType}
                    defaultValue={defaultValue}
                />
            ) : (
                <ColorPicker
                    fullWidth
                    size={colorPickerSize}
                    swatches={swatches? swatches : undefined}
                    swatchesPerRow={swatches ? swatchesPerRow : undefined}
                    value={value}
                    onChange={handleChange}
                    format={colorType}
                    defaultValue={defaultValue}
                />
            )}
        </MantineProvider>
    );
}


const CsColorPickerV2ElementRegistration: FormElementRegistration<CsColorPickerV2Props> = {
    component: CsColorPickerV2,
    getInitialProperties: () => ({
        componentType: "ColorInput",
        defaultValue: "rgb(168, 160, 152, 1)", 
        swatchesPerRow: 7, 
        colorPickerSize: "md",
        colorType: "rgba" as ColorFormat,
        swatches: [
            "rgb(37, 38, 43)",
            "rgb(134, 142, 150)",
            "rgb(250, 82, 82)",
            "rgb(230, 73, 128)",
            "rgb(190, 75, 219)",
            "rgb(121, 80, 242)",
            "rgb(76, 110, 245)",
            "rgb(34, 139, 230)",
            "rgb(21, 170, 191)",
            "rgb(18, 184, 134)",
            "rgb(64, 192, 87)",
            "rgb(130, 201, 30)",
            "rgb(250, 176, 5)",
            "rgb(253, 126, 20)"
        ]
    }),
    id: "CsColorPickerV2",
};

export default CsColorPickerV2ElementRegistration;