import { EditorModule } from "..";
import { getOption } from "../config/compUIOptions/create";
import { DesignTemp } from "../defines/DesignTemp";
import { DesignComp } from "../defines/DesignTemp/DesignComp";
import { ICompKeys } from "../typings";

export const store = EditorModule.store({
  state: () => ({
    mode: "edit",
    currCompId: "",
    designData: new DesignTemp(),
  }),
  getters: {
    isEditMode(state) {
      return state.mode === "edit";
    },
    currComp(state) {
      const comp = state.designData.content.find(
        (d) => d.id === state.currCompId
      );
      return comp;
    },
  },
  actions: {
    setMode(v: string) {
      this.store.mode = v;
    },
    initDesignData(data: Partial<DesignTemp>) {
      this.store.designData = new DesignTemp(data);
    },
    insertDesignContent(compKey: ICompKeys, index?: number) {
      index || (index = this.store.designData.content.length);
      const comp = new DesignComp({
        compKey,
        value: getOption(this.config.compUIOptions, compKey)?.defaultValue,
      });
      this.store.designData.content.splice(index, 0, comp);
      return comp;
    },
    setCurrComp(compId: string) {
      this.store.currCompId = compId;
    },
    deleteComp(compId: string) {
      const index = this.store.designData.content.findIndex(
        (d) => d.id === compId
      );
      if (index !== -1) {
        this.store.designData.content.splice(index, 1);
      }
    },
    moveComp(selIndex: number, targetIndex: number) {
      const { content } = this.store.designData;
      const [selComp] = content.splice(selIndex, 1);
      content.splice(targetIndex, 0, selComp);
    },
  },
});