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: () => ({
    editMode: "edit",
    currCompId: "",
    designData: new DesignTemp(),
  }),
  getters: {
    currComp(state) {
      const comp = state.designData.content.find(
        (d) => d.id === state.currCompId
      );
      return comp;
    },
  },
  actions: {
    setEditMode(v: string) {
      this.store.editMode = 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);
      }
    },
  },
});