import React, { useContext, useMemo } from 'react';
import { ConfigContext } from '../wau-config-provider';
import Popover from '../popover';
import Row from '../row';
import Col from '../col';
import { colorList } from './constants';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
const defaultColor = '#ffffff';
const ColorBox = props => {
  const {
    getPrefixCls
  } = useContext(ConfigContext);
  const cName = useMemo(getPrefixCls, [getPrefixCls]);
  const {
    onChange: changeColor,
    value: selectedColor = defaultColor,
    disabled
  } = props;
  const content = /*#__PURE__*/_jsxs(Row, {
    className: `${cName}-popover`,
    gutter: [8, 8],
    children: [/*#__PURE__*/_jsx(Col, {
      onClick: () => !disabled && (changeColor === null || changeColor === void 0 ? void 0 : changeColor(defaultColor)),
      children: /*#__PURE__*/_jsx("div", {
        style: {
          backgroundColor: defaultColor
        },
        className: `${cName}-color-item`
      })
    }), colorList.map(item => {
      return /*#__PURE__*/_jsx(Col, {
        onClick: () => !disabled && (changeColor === null || changeColor === void 0 ? void 0 : changeColor(item)),
        children: /*#__PURE__*/_jsx("div", {
          style: {
            backgroundColor: item,
            borderColor: item
          },
          className: `${cName}-color-item`
        })
      }, item);
    })]
  });
  return /*#__PURE__*/_jsx(_Fragment, {
    children: /*#__PURE__*/_jsx(Popover, {
      content: content,
      trigger: "click",
      children: /*#__PURE__*/_jsx("div", {
        className: `${cName}-color-selected-border`,
        children: /*#__PURE__*/_jsx("div", {
          className: `${cName}-color-selected-item`,
          style: {
            backgroundColor: selectedColor
          }
        })
      })
    })
  });
};
export default ColorBox;