import { MindElixirData } from "mind-elixir";
import { useState, useMemo } from "react";
import type { ColorPickerProps, GetProp } from "antd";

export const INITIAL_DATA: MindElixirData = {
  nodeData: {
    id: "root",
    topic: "中心主题",
  },
};

export const LOADING_DATA: MindElixirData = {
  nodeData: {
    id: "root",
    topic: "生成中....",
  },
};

export const FONT_SIZE_OPTIONS = [
  { value: "10", label: "10" },
  { value: "12", label: "12" },
  { value: "16", label: "16" },
  { value: "18", label: "18" },
  { value: "24", label: "24" },
  { value: "32", label: "32" },
  { value: "48", label: "48" },
];

export const EXPORT_OPTIONS = [
  { value: "png", label: "导出为PNG" },
  { value: "svg", label: "导出为SVG" },
];

type Color = Extract<
  GetProp<ColorPickerProps, "value">,
  string | { cleared: any }
>;

export const useColor = (initialColor: string) => {
  const [color, setColor] = useState<Color>(initialColor);

  const hexColor = useMemo(() => {
    if (typeof color === "string") {
      return color;
    }
    if (color && "toHexString" in color) {
      return color.toHexString();
    }
    return initialColor;
  }, [color, initialColor]);

  return [hexColor, setColor] as const;
};