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,
  joinKey,
} 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";
import { watch } from "vue";

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;
    });
  });
  draw.mountFilter.setMenusFilter('serial', data => {
    data = {...data}
    delete data.fontStyle
    return data
  })

  const backs = [
    () => {
      types.forEach((type) => {
        draw.mountFilter.setMenusFilter(type);
      });
      draw.mountFilter.setMenusFilter('serial')
    },
    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) }),
    watch(
      () =>
        draw.store.getTypeItems("table").filter((item) => item.key === joinKey),
      (serialTables, _, onCleanup) => {
        const fns = serialTables.map((item) => {
          draw.mountFilter.setShapeMenusFilter(item.id, item => {
            const c = {...item}
            delete c.align
            return c
          })
          return () => draw.menusFilter.setShapeMenusFilter(item.id)
        });
        onCleanup(mergeFuns(fns))
      },
      { immediate: true }
    ),
  ];

  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);
};