import { useEditor } from "@/modules/editor";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
import { cloneDeep } from "lodash";

type CommPropType = Pick<
  DesignComp,
  "compKey" | "background" | "layout" | "id"
>;

function RegCompType<T>(
  info: { type: string; name: string; thumbnail: string },
  defValue: Partial<CommPropType> & { value: T }
) {
  const createCompData = function (
    values: Partial<T>,
    comm?: Partial<CommPropType>
  ) {
    const defvalues = cloneDeep(defValue);
    defvalues.compKey = info.type as any;

    const c = Object.assign({}, defvalues, comm, {
      value: values,
    }) as CommPropType & { value: T };
    return new DesignComp(c) as typeof c;
  };

  type ValueType = ReturnType<typeof createCompData>;

  function useCompData(compId: string) {
    const editor = useEditor();
    return editor.store.designData.compMap[compId] as ValueType;
  }
  return { useCompData, createCompData };
}

export { RegCompType };

