export type Collection<T> = {
  items: T[];
  keys: string[];
  set: (key: string, obj: T) => void;
  get: (key: string) => T;
  has: (key: string) => boolean;
  delete: (key: string) => void;
  toLiteral: () => {
    [key: string]: T;
  };
};

export type Slot = {
  id: string;
  caption: string;
  icon: string;
  name: string;
  html: string;
  component: string;
  classes: Collection<string | boolean>;
  style: Collection<string | boolean>;
  vars: Collection<any>;
  __setup: (slot: Slot, rack: Rack) => void;
  setup: (slot: Slot, rack: Rack) => void;
  __clicked: (slot: Slot, rack: Rack) => void;
  clicked: (slot: Slot, rack: Rack) => void;
  __updated: (slot: Slot, rack: Rack) => void;
  updated: (slot: Slot, rack: Rack) => void;
  mount: (container: Rack | Map<string, Slot>) => void;
  rack: Rack;
  refresh: () => void;
};

export type Rack = {
  name: string;
  classes: Collection<string | boolean>;
  style: Collection<string | boolean>;
  slots: Collection<Slot>;
  __setup: (rack: Rack) => void;
  setup: (rack: Rack) => void;
  __updated: (rack: Rack) => void;
  updated: (rack: Rack) => void;
  mount: () => void;
  refresh: () => void;
  refreshAll: () => void;
};

export declare function useSlot(id?: string): Slot;

export declare function useRack(name: string): Rack;