import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { HexColorPicker } from 'react-colorful';
import { useTranslation } from 'react-i18next';
import { Button, Icon, Tooltip } from '../../basic';
import '../AppColorpicker/style.scss';
const defaultColor = '#FFFFFF';
export default function FormColorField({ attr, label, form, disabled, tooltipText, onChange, }) {
    const fieldName = attr;
    const { t } = useTranslation('common');
    const formValue = form.watch(fieldName);
    const [openColor, setOpenColor] = useState(false);
    const [color, setColor] = useState(defaultColor);
    useEffect(() => {
        setColor(formValue || defaultColor);
    }, [formValue]);
    const handleConfirm = () => {
        form.setValue(fieldName, color, { shouldDirty: true });
        onChange?.(color);
        setOpenColor(false);
    };
    return (_jsxs("div", { className: "form-color-field", children: [_jsxs("div", { className: "form-color-field-label", children: [_jsx("span", { children: label }), tooltipText && (_jsx(Tooltip, { title: tooltipText, children: _jsx("span", { children: _jsx(Icon, { name: "help", className: "info", size: "x-small" }) }) }))] }), _jsxs("div", { className: "color-picker-container", children: [_jsx("div", { className: "swatch", style: { backgroundColor: color }, onClick: () => !disabled && setOpenColor(!openColor), onKeyDown: () => !disabled && setOpenColor(!openColor), role: "link", "aria-label": "open color picker", tabIndex: disabled ? -1 : 0 }), openColor && !disabled && (_jsxs(_Fragment, { children: [_jsx(HexColorPicker, { color: color, onChange: setColor }), _jsxs("div", { className: "buttons", children: [_jsx(Button, { text: t('button.confirm'), onClick: handleConfirm, size: "x-small" }), _jsx(Button, { text: t('button.cancel'), onClick: () => setOpenColor(false), color: "danger", size: "x-small" })] })] }))] })] }));
}
