import React, { forwardRef, useRef, useState } from "react";
import { ReloadOutlined } from "@easyv/react-icons";
import classNames from "classnames";
import EasyRange from "../../config-types/Range";
import { useClickOutside } from "../../easy-use";
import styles from "./index.less";

function ModalColor({ onChange, position, cancel, value }, ref) {
  useClickOutside(ref, cancel);
  const { balance = {}, control = {} } = value;
  const nameMap = {
    hue: "色相",
    saturation: "饱和度",
    brightness: "明度",
    lightness: "亮度",
    contrast: "对比度",
    vibrance: "自然饱和度",
    cyanRed: "青色,红色",
    magentaGreen: "洋红,绿色",
    yellowBlue: "黄色,蓝色",
  };
  const [active, setActive] = useState("control");
  const handleReload = () => {
    const newVal = Object.keys(value[active] || {}).reduce((acc, cur) => {
      acc[cur] = 0;
      return acc;
    }, {});
    onChange({ ...value, [active]: newVal });
  };
  const handleChange = (itemValue, index) => {
    let newValue = { ...value };
    newValue[active] = {
      ...newValue[active],
      [index]: itemValue,
    };
    onChange(newValue);
  };
  const handleChangeActive = (item) => {
    const target = item.target.dataset.tag;
    if (target) {
      setActive(target);
    }
  };
  return (
    <div ref={ref} className={styles.modal} style={{ left: position.x, top: position.y }}>
      <div className={styles.header}>
        <div className={styles.headerTab} onClick={handleChangeActive}>
          <div data-tag="control" className={classNames({ [styles.active]: active === "control" })}>
            颜色调整
          </div>
          <div data-tag="balance" className={classNames({ [styles.active]: active === "balance" })}>
            色彩平衡
          </div>
        </div>
        <div onClick={handleReload} className={styles.icon}>
          <ReloadOutlined />
          重置
        </div>
      </div>
      <div style={active === "balance" ? { display: "none" } : {}}>
        {Object.keys(control).map((item) => {
          const haveChanged = useRef(false);
          return (
            <div
              className={classNames(styles.range, styles[item], {
                [styles.haveChanged]: haveChanged.current,
              })}
              key={item}
            >
              <div className={styles.labelTag}>{nameMap[item]}</div>
              <EasyRange
                min={-100}
                max={100}
                value={control[item]}
                defaultValue={0}
                theme="control"
                onChange={(itemValue) => {
                  haveChanged.current = true;
                  handleChange(itemValue, item);
                }}
              ></EasyRange>
            </div>
          );
        })}
      </div>
      <div style={active === "control" ? { display: "none" } : {}}>
        {Object.keys(balance).map((item) => {
          const haveChanged = useRef(false);
          return (
            <div
              className={classNames(styles.range, styles[item], {
                [styles.haveChanged]: haveChanged.current,
              })}
              key={item}
            >
              <EasyRange
                min={-100}
                max={100}
                theme="control"
                value={balance[item]}
                tagNames={nameMap[item]}
                defaultValue={0}
                onChange={(itemValue) => {
                  haveChanged.current = true;
                  handleChange(itemValue, item);
                }}
              ></EasyRange>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default forwardRef(ModalColor);