import { defaultStyle as iconDefStyle } from "@/core/components/icon";
import { defaultStyle as rectDefStyle } from "@/core/components/rectangle";
import { defaultStyle as circleDefStyle } from "@/core/components/circle";
import { defaultStyle as triangleDefStyle } from "@/core/components/triangle";
import { defaultStyle as arrowDefStyle } from "@/core/components/arrow";
import { defaultStyle as serialDefStyle, defaultTableStyle as serialTableDefStyle } from "@/core/components/serial";
import { defaultStyle as tableDefStyle } from "@/core/components/table";
import { PaperKey } from "@/example/components/slide/actions";
import { mergeFuns } from "@/utils/shared";
import { getRealPixel } from "./tabulation/gen-tab";
import { Draw } from "@/example/components/container/use-draw";
import { ShapeType } from "@/index";

const setDefStyle = <T extends {}>(
  sys: T,
  custom: Partial<T>,
  itemKey?: string
) => {
  const backs: (() => void)[] = [];
  for (const key in custom) {
    const oldVal = sys[key];
    sys[key] = custom[key]!;
    backs.push(() => {
      sys[key] = oldVal;
    });
  }

  return mergeFuns(backs);
};

export const tabCustomStyle = (p: PaperKey, draw: Draw) => {
  const types = ["icon", "table", "serial", 'arrow', 'circle', 'rectangle', 'triangle', 'polygon'] as ShapeType[];
  types.forEach((type) => {
    draw.mountFilter.setMenusFilter(type, (data) => {
      data.strokeWidth.props = {
        ...data.strokeWidth.props,
        proportion: true,
        step: 0.1,
        min: 0.1,
        max: 10
      };
      return data;
    });
  });

  const backs = [
    () => {
      types.forEach((type) => {
        draw.mountFilter.setMenusFilter(type);
      });
    },
    setDefStyle(
      iconDefStyle,
      {
        width: getRealPixel(10, p),
        height: getRealPixel(10, p),
        strokeWidth: getRealPixel(0.5, p),
      } as any,
      "icon"
    ),
    setDefStyle(serialDefStyle, {
      strokeWidth: getRealPixel(0.5, p),
      fill: null,
    } as any),
    setDefStyle(serialTableDefStyle, {
      nameColWidth: getRealPixel(20, p),
      valueColWidth: getRealPixel(20, p),
      fontSize: getRealPixel(4, p),
      padding: getRealPixel(2, p),
      colHeight: getRealPixel(8, p),
      tableStrokeWidth: getRealPixel(0.5, p),
      repColCount: 2,
    } as any),
    setDefStyle(tableDefStyle, { strokeWidth: getRealPixel(0.5, p) }),
    setDefStyle(rectDefStyle, { strokeWidth: getRealPixel(0.5, p) }),
    setDefStyle(circleDefStyle, { strokeWidth: getRealPixel(0.5, p) }),
    setDefStyle(triangleDefStyle, { strokeWidth: getRealPixel(0.5, p) }),
    setDefStyle(arrowDefStyle, { strokeWidth: getRealPixel(0.5, p) }),
  ];

  return mergeFuns(backs);
};

export const overviewCustomStyle = (draw: Draw) => {
  draw.mountFilter.setMenusFilter("icon", (data) => {
    data.strokeWidth.props = {
      ...data.strokeWidth.props,
      proportion: true,
    };
    return data;
  });
  const backs = [
    () => {
      draw.mountFilter.setMenusFilter("icon");
    },
    setDefStyle(
      iconDefStyle,
      {
        strokeWidth: 1,
      } as any,
      "icon"
    ),
  ];
  return mergeFuns(backs);
};