declare module "family-chart" {
  type f3data = any;
  type f3tree = any;

  interface f3Rels {
    spouses?: string[];
    father?: string;
    mother?: string;
    children?: string[];
  }

  interface f3DataData {
    gender: "M" | "F";
    avatar?: string;
    dead: boolean;
    birthday?: string;
    deathday?: string;
    first_name: string;
    last_name: string;
    dateOfWedding?: string;
    wedding_state?: string;
  }

  interface f3Data {
    id: string;
    rels: f3Rels;
    data: f3DataData;
  }

  type f3State = {
    data: f3Data[];
    main_id?: any;
    tree?: f3tree;
    node_separation?: number;
    level_separation?: number;
  };

  interface f3Update {
    tree: (props) => void;
    mainId: (mainId) => void;
    data: (data: f3data) => void;
  }

  interface f3Store {
    state: f3State;
    update: f3update;
    getData: () => f3data;
    getTree: () => f3tree;
    setOnUpdate: (cb: (props) => void) => void;
    methods: any;
  }

  function createStore(initial_state: f3State): f3Store;

  function CalculateTree({
    data_stash,
    main_id = null,
    is_vertical = true,
    node_separation = 250,
    level_separation = 150,
  });

  function d3AnimationView(p: {
    store: f3Store;
    cont: HTMLElement | null;
    Card?: any;
  });

  const handlers: any;

  type F3elements = {
    Card: (props: {
      store: f3Store;
      svg: HTMLElement;
      mini_tree: boolean;
      link_break: boolean;
      cardEditForm?: boolean;
      card_dim: {
        w: number;
        h: number;
        text_x: number;
        text_y: number;
        img_w: number;
        img_h: number;
        img_x: number;
        img_y: number;
      };
      card_display: ((data: f3Data) => string)[];
    }) => F3CardBuilder;
  };

  type F3CardBuilder = (p: { node; d }) => HTMLElement;

  const elements: F3elements;
}