import {
  VerticalAlignBottomOutlined,
  VerticalAlignMiddleOutlined,
  VerticalAlignTopOutlined,
} from "@ant-design/icons";

/** 箭头类型 */
export const arrowOptions = [
  { name: "", icon: require("@/assets/icon/arrow0.png") },
  { name: "block", icon: require("@/assets/icon/arrow1.png") },
  { name: "classic", icon: require("@/assets/icon/arrow2.png") },
  { name: "diamond", icon: require("@/assets/icon/arrow3.png") },
  { name: "circle", icon: require("@/assets/icon/arrow4.png") },
  { name: "circlePlus", icon: require("@/assets/icon/arrow5.png") },
  { name: "ellipse", icon: require("@/assets/icon/arrow6.png") },
  { name: "cross", icon: require("@/assets/icon/arrow7.png") },
  { name: "async", icon: require("@/assets/icon/arrow8.png") },
];

/** 字体类型 */
export const fontFamilyOptions = [
  {
    label: "免费商用",
    title: "免费商用",
    options: [
      {
        value: "思源黑体",
        label: (
          <span>
            <img
              style={{ height: 14 }}
              src={require("@/assets/fonts/sy-heiti.png")}
            />
          </span>
        ),
      },
      {
        value: "思源宋体",
        label: (
          <span>
            <img
              style={{ height: 14 }}
              src={require("@/assets/fonts/sy-songti.png")}
            />
          </span>
        ),
      },
      {
        value: "阿里巴巴普惠",
        label: (
          <span>
            <img
              style={{ height: 14 }}
              src={require("@/assets/fonts/ali-puhui.png")}
            />
          </span>
        ),
      },
      {
        value: "苍耳与墨",
        label: (
          <span>
            <img
              style={{ height: 14 }}
              src={require("@/assets/fonts/cangeryumo.png")}
            />
          </span>
        ),
      },
      {
        value: "Beau",
        label: (
          <span>
            <img
              style={{ height: 14 }}
              src={require("@/assets/fonts/beau.png")}
            />
          </span>
        ),
      },
      {
        value: "Bertha",
        label: (
          <span>
            <img
              style={{ height: 14 }}
              src={require("@/assets/fonts/bertha.png")}
            />
          </span>
        ),
      },
      {
        value: "Brela",
        label: (
          <span>
            <img
              style={{ height: 14 }}
              src={require("@/assets/fonts/brela.png")}
            />
          </span>
        ),
      },
    ],
  },
  {
    label: "其他",
    title: "其他",
    options: [
      {
        value: "黑体",
        label: (
          <span>
            <img
              style={{ height: 14 }}
              src={require("@/assets/fonts/heiti.png")}
            />
          </span>
        ),
      },
      {
        value: "楷体",
        label: (
          <span>
            <img
              style={{ height: 14 }}
              src={require("@/assets/fonts/kaiti.png")}
            />
          </span>
        ),
      },
      {
        value: "宋体",
        label: (
          <span>
            <img
              style={{ height: 14 }}
              src={require("@/assets/fonts/songti.png")}
            />
          </span>
        ),
      },
      {
        value: "微软雅黑",
        label: (
          <span>
            <img
              style={{ height: 14 }}
              src={require("@/assets/fonts/yahei.png")}
            />
          </span>
        ),
      },
      {
        value: "Arial",
        label: <span style={{ fontFamily: "Arial" }}>Arial</span>,
      },
      {
        value: "Times New Roman",
        label: (
          <span style={{ fontFamily: "Times New Roman" }}>Times New Roman</span>
        ),
      },
      {
        value: "Comic Sans MS",
        label: (
          <span style={{ fontFamily: "Comic Sans MS" }}>Comic Sans MS</span>
        ),
      },
      {
        value: "Courier New",
        label: <span style={{ fontFamily: "Courier New" }}>Courier New</span>,
      },
      {
        value: "Verdana",
        label: <span style={{ fontFamily: "Verdana" }}>Verdana</span>,
      },
      {
        value: "Garamond",
        label: <span style={{ fontFamily: "Garamond" }}>Garamond</span>,
      },
      {
        value: "Georgia",
        label: <span style={{ fontFamily: "Georgia" }}>Georgia</span>,
      },
      {
        value: "Impact",
        label: <span style={{ fontFamily: "Impact" }}>Impact</span>,
      },
      {
        value: "Tahoma",
        label: <span style={{ fontFamily: "Tahoma" }}>Arial</span>,
      },
      {
        value: "Lucida Console",
        label: (
          <span style={{ fontFamily: "Lucida Console" }}>Lucida Console</span>
        ),
      },
    ],
  },
];

/** 对齐方式 */
export const alignOptionData: {
  id: 'left' | 'vcenter' | 'right' | 'top' | 'hcenter' | 'bottom' | 'h' | 'v';
  name: string;
  icon: React.ReactNode;
  fastKey?: string;
}[] = [
  { id: "left", name: "左对齐", icon: "icon-zuoduiqi2", fastKey: "Alt+L" },
  {
    id: "vcenter",
    name: "居中对齐",
    icon: "icon-shuipingduiqi2",
    fastKey: "Alt+C",
  },
  { id: "right", name: "右对齐", icon: "icon-youduiqi2", fastKey: "Alt+R" },
  { id: "top", name: "顶端对齐", icon: "icon-dingbuduiqi2", fastKey: "Alt+T" },
  {
    id: "hcenter",
    name: "垂直居中对齐",
    icon: "icon-chuizhiduiqi2",
    fastKey: "Alt+M",
  },
  { id: "bottom", name: "底端对齐", icon: "icon-dibuduiqi2", fastKey: "Alt+B" },
  {
    id: "h",
    name: "水平平均分布",
    icon: "icon-shuipingfenbu2",
    fastKey: "Alt+H",
  },
  {
    id: "v",
    name: "垂直平均分布",
    icon: "icon-chuizhifenbu2",
    fastKey: "Alt+V",
  },
];

/**
 * 文本对齐方式
 */
export const textAlignList = [
  {
    id: "left",
    name: "左对齐",
    target: "textAlign",
    icon: <i className="iconfont icon-zuoduiqi" />,
  },
  {
    id: "center",
    name: "居中对齐",
    target: "textAlign",
    icon: <i className="iconfont icon-juzhong" />,
  },
  {
    id: "right",
    name: "右对齐",
    target: "textAlign",
    icon: <i className="iconfont icon-youduiqi" />,
  },
  {
    id: "top",
    name: "顶端对齐",
    target: "textVAlign",
    icon: <VerticalAlignTopOutlined />,
  },
  {
    id: "middle",
    name: "垂直居中",
    target: "textVAlign",
    icon: <VerticalAlignMiddleOutlined />,
  },
  {
    id: "bottom",
    name: "底端对齐",
    target: "textVAlign",
    icon: <VerticalAlignBottomOutlined />,
  },
];
