import { BorderSize, MindmapConnectorType, TopicType } from "../enum";
import { TopicItem } from "../types";
import { getRandomColor, lightenColor } from "../utils/color";

export const theme1 = (parent?: TopicItem) => {
  const color1 = getRandomColor(["#3D4BCF", "#9C2CB8"]);
  return {
    main: {
      fill: {
        fillType: "color",
        color1: "#30304D",
      },
      text: {
        color: "#fff",
        fontSize: 30,
      },
      stroke: {
        width: 0,
      },
      edge: {
        color: "#fff"
      },
      borderSize: BorderSize.medium
    },
    branch: {
      fill: {
        fillType: "color",
        color1,
      },
      text: {
        color: "#fff",
        fontSize: 18,
      },
      stroke: {
        width: 0,
      },
      edge: {
        color: color1,
        width: 3,
      },
      borderSize: BorderSize.medium
    },
    sub: {
      fill: {
        fillType: "color",
        color1: parent?.type === TopicType.branch ? lightenColor(parent?.fill.color1, 150) : parent?.fill?.color1,
      },
      text: {
        color: parent?.type === TopicType.branch ? lightenColor(parent?.fill.color1, -10) : parent?.text?.color,
        fontSize: 14,
      },
      stroke: {
        width: 0,
      },
      edge: {
        color: parent?.type === TopicType.branch ? parent?.fill?.color1 : parent?.edge?.color || '#323232',
        width: 2,
      },
      borderSize: BorderSize.medium
    },
    background: {
      fillType: "color",
      fill: "#fff",
      fillImageUrl: ""
    },
    branchConnector: MindmapConnectorType.curve,
    subConnector: MindmapConnectorType.rounded,
  }
}