export type CodeLanguage = 'html' | 'css' | 'js';

type Change = {
  selector?: string;
  selectors?: string[];
  friendlySelector?: string;
  friendlySelectors?: string[];
  friendlySelectorIndex?: number;
  friendlySelectorIndexes?: number[];
  property?: string;
  value?: string;
  action?: 'replace' | 'after' | 'before' | 'append' | 'insert';
};

export type Margin = { top: number; left: number };

export type IsContextOpenType = { left: number; top: number } | false;

export type OpenContextMenuProps = { dims: Dims; clientX: number; clientY: number; isHierarchy: boolean };

export type GlobalChanges = { globalJavascript: string; globalCSS: string };
export type ChangesType = [GlobalChanges, ...LocalChange[]];

export type HTMLElementWithHierarchy = Partial<HTMLElement> & {
  hierarchy?: HTMLElementWithHierarchy[];
  element?: HTMLElement;
  selector?: string;
  friendlySelector?: string;
  friendlySelectorIndex?: number;
  outerHTML?: string;
  computedStyles?: Record<string, string>;
};

export type Dims = Partial<DOMRect>;

export type LocalChange = Partial<Change> & {
  hierarchy?: HTMLElementWithHierarchy[];
  dims?: Dims;
  element?: HTMLElement;
  undoElement?: HTMLElement;
  clone?: HTMLElement;
};
