// element
import { getModel as createLines } from "../../../elements/lines/model";
import { getModel as createLine } from "../../../elements/line/model";
import { getModel as createText } from "../../../elements/text/model";
import { getModel as createImage } from "../../../elements/image/model";
import { getModel as createGrids } from "../../../elements/grids/model";
import { getModel as createPane } from "../../../elements/pane/model";
import { getModel as createBarcode } from "../../../elements/barcode/model";
import { getModel as createFillNumber } from "../../../elements/fill-number/model";
import { getModel as createFillField } from "../../../elements/fill-field/model";
import { getModel as createFillTable } from "../../../elements/fill-table/model";
import { getModel as createFillPane } from "../../../elements/fill-pane/model";
import { getModel as createFillQuestion } from "./fill-question/model";
import { getModel as createFillLine } from "./fill-line/model";

// available infos
export const EDITABLE_ELEMENT = [
  "LINE_HORIZONTAL",
  "LINE_VERTICAL",
  "TEXT",
  "IMAGE",
  "PANE",
  "BARCODE",
];

export const EDITABLE_TOPIC = [
  "FILL_QUESTION",
  "FILL_LINE",
  "FILL_NUMBER",
  "FILL_FIELD",
  "FILL_TABLE",
  "FILL_PANE",
  "LINES",
  "GRIDS",
];

export const ELEMENT_INFOS = {
  LINES: {
    name: "多横线",
    getModel: createLines,
    getDesc: (element) => {
      return `多横线-行数:${element.lineCount}`;
    },
  },
  LINE_HORIZONTAL: {
    name: "横线",
    getModel: () => createLine("HORIZONTAL"),
    getDesc: () => {
      return `横线`;
    },
  },
  LINE_VERTICAL: {
    name: "竖线",
    getModel: () => createLine("VERTICAL"),
    getDesc: () => {
      return `竖线`;
    },
  },
  TEXT: {
    name: "文本",
    getModel: createText,
    getDesc: (element) => {
      return `文本-${element.content[0].content.substr(0, 20)}`;
    },
  },
  IMAGE: {
    name: "图片",
    getModel: createImage,
    getDesc: () => {
      return `图片`;
    },
  },
  GRIDS: {
    name: "网格",
    getModel: createGrids,
    getDesc: (element) => {
      return `网格-${element.columnCount}×${element.rowCount}`;
    },
  },
  PANE: {
    name: "方框",
    getModel: createPane,
    getDesc: () => {
      return `方框`;
    },
  },
  BARCODE: {
    name: "条形码",
    getModel: createBarcode,
    getDesc: (element) => {
      const name = (element.fields[0] && element.fields[0].name) || "";
      return `条形码-${name}`;
    },
  },
  FILL_QUESTION: {
    name: "选项填涂",
    getModel: createFillQuestion,
    getDesc: (element) => {
      const endNumber = element.startNumber + element.questionsCount - 1;
      return `选项填涂-${element.startNumber}~${endNumber}`;
    },
  },
  FILL_LINE: {
    name: "填空",
    getModel: createFillLine,
    getDesc: (element) => {
      const endNumber = element.startNumber + element.questionsCount - 1;
      return `填空-${element.startNumber}~${endNumber}`;
    },
  },
  FILL_NUMBER: {
    name: "号码填涂",
    getModel: createFillNumber,
    getDesc: (element) => {
      return `号码填涂-${element.name}`;
    },
  },
  FILL_FIELD: {
    name: "变量",
    getModel: createFillField,
    getDesc: (element) => {
      const fieldNames = element.fields.map((field) => field.name).join("，");
      return `变量-${fieldNames}`;
    },
  },
  FILL_TABLE: {
    name: "表格",
    getModel: createFillTable,
    getDesc: (element) => {
      return `表格-${element.colCount}×${element.rowCount}`;
    },
  },
  FILL_PANE: {
    name: "方格组",
    getModel: createFillPane,
    getDesc: (element) => {
      return `方格组-${element.paneCount}`;
    },
  },
};

export const ELEMENT_LIST = EDITABLE_ELEMENT.map((type) => {
  return {
    ...ELEMENT_INFOS[type],
    type,
  };
});

export const TOPIC_LIST = EDITABLE_TOPIC.map((type) => {
  return {
    ...ELEMENT_INFOS[type],
    type,
  };
});

// 获取元件默认数据结构
export const getElementModel = (type) => {
  return { ...ELEMENT_INFOS[type].getModel(), zindex: 9, desc: "" };
};

export const getElementName = (type) => {
  return ELEMENT_INFOS[type].name;
};
export const getElementDesc = (element) => {
  return ELEMENT_INFOS[element.type].getDesc(element);
};