import { HighlightOutlined } from "@ant-design/icons";
import { ColorPicker } from "antd";
import classNames from "clsx";
import React from "react";
import { ToolBarItem } from "./ToolBarItem";
var colors = [
    {
        color: 'rgba(16,185,129,1)'
    },
    {
        color: 'rgba(245,158,11,1)'
    },
    {
        color: 'rgba(59,130,246,1)'
    },
    {
        color: 'rgba(156,163,175,.8)'
    },
    {
        color: 'rgba(99,102, 241,1)'
    },
    {
        color: 'rgba(244,63,94,1)'
    },
    {
        color: 'rgba(217,70,239,1)'
    },
    {
        color: 'rgba(14, 165, 233, 1)'
    }
];
export var ColorPickerButton = /*#__PURE__*/ React.memo(function(param) {
    var baseClassName = param.baseClassName, hashId = param.hashId, i18n = param.i18n, highColor = param.highColor, isHighColorActive = param.isHighColorActive, onColorChange = param.onColorChange, onToggleHighColor = param.onToggleHighColor;
    var _i18n_locale;
    var handleColorChange = React.useCallback(function(color) {
        onColorChange(color.toHexString());
    }, [
        onColorChange
    ]);
    return /*#__PURE__*/ React.createElement(ToolBarItem, {
        title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale = i18n.locale) === null || _i18n_locale === void 0 ? void 0 : _i18n_locale['font-color']) || '字体颜色',
        icon: /*#__PURE__*/ React.createElement(HighlightOutlined, null),
        className: classNames("".concat(baseClassName, "-item"), hashId),
        style: {
            position: 'relative'
        }
    }, /*#__PURE__*/ React.createElement(ColorPicker, {
        style: {
            position: 'absolute',
            opacity: 0,
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        },
        size: "small",
        value: highColor,
        presets: [
            {
                label: 'Colors',
                colors: colors.map(function(c) {
                    return c.color;
                })
            }
        ],
        onChange: handleColorChange
    }), /*#__PURE__*/ React.createElement("div", {
        style: {
            display: 'flex',
            height: '100%',
            alignItems: 'center',
            fontWeight: isHighColorActive ? 'bold' : undefined,
            textDecoration: 'underline solid ' + highColor,
            textDecorationThickness: 2,
            lineHeight: 1,
            color: highColor || undefined
        },
        role: "button",
        onMouseEnter: function onMouseEnter(e) {
            return e.stopPropagation();
        },
        onClick: onToggleHighColor
    }, /*#__PURE__*/ React.createElement(HighlightOutlined, null)));
});
ColorPickerButton.displayName = 'ColorPickerButton';
