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 } from '../../basic';
import './style.scss';
const defaultColor = '#FFFFFF';
export default function AppColorpicker({ field, item, handleSave, }) {
    const { t } = useTranslation('common');
    const [openColor, setOpenColor] = useState(false);
    const [color, setColor] = useState(defaultColor);
    useEffect(() => {
        if (item[field.name])
            setColor(item[field.name]);
        else
            setColor(defaultColor);
    }, [item]);
    return (_jsxs("div", { className: "color-picker-container", children: [_jsx("div", { className: "swatch", style: { backgroundColor: color }, onClick: () => setOpenColor(!openColor), onKeyDown: () => setOpenColor(!openColor), role: "link", "aria-label": "open color picker", tabIndex: 0 }), openColor && (_jsxs(_Fragment, { children: [_jsx(HexColorPicker, { color: color, onChange: setColor }), _jsxs("div", { className: "buttons", children: [_jsx(Button, { text: t('button.confirm'), onClick: () => {
                                    handleSave(color, field);
                                    setOpenColor(false);
                                }, size: "x-small" }), _jsx(Button, { text: t('button.cancel'), onClick: () => setOpenColor(false), color: "danger", size: "x-small" })] })] }))] }));
}
