import { StructureType } from "@/enum";
import { Tabs } from "antd";
import React from "react";
import { useModel } from "umi";

const structures = [
  {
    name: "左右分布",
    icon: "icon-Frame1",
    type: StructureType.leftRight,
  },
  // {
  //   name: "自由分布",
  //   icon: "icon-ziyoubuju",
  //   type: StructureType.free,
  // },
  {
    name: "右侧分布",
    icon: "icon-siweidaotubianjiqi",
    type: StructureType.right,
  },
  {
    name: "左侧分布",
    icon: "icon-siweidaotubianjiqi-1",
    type: StructureType.left,
  },
  {
    name: "树状结构图",
    icon: "icon-siweidaotubianjiqi-2",
    type: StructureType.tree,
  },
  {
    name: "组织结构图",
    icon: "icon-xinzuzhijiegoutu",
    type: StructureType.organization,
  },
  {
    name: "左侧鱼骨图",
    icon: "icon-siweidaotubianjiqi-3",
    type: StructureType.leftFishbone,
  },
  {
    name: "右侧鱼骨图",
    icon: "icon-siweidaotubianjiqi-4",
    type: StructureType.rightFishbone,
  },
  {
    name: "横向时间轴",
    icon: "icon-shijianzhou",
    type: StructureType.horizontalTime,
  },
  {
    name: "向上时间轴",
    icon: (
      <svg
        width="28"
        height="28"
        viewBox="0 0 28 28"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_31667_57555)">
          <path
            d="M26.4241 15.0547L8.93872 15.0547"
            stroke="#9AA5B8"
            strokeWidth="1.4"
            strokeLinecap="round"
            strokeLinejoin="round"
          ></path>
          <path
            d="M7.40805 15.0547L13.708 15.0547L13.708 9.00107L15.8855 9.00107"
            stroke="#9AA5B8"
            strokeWidth="1.4"
            strokeLinecap="round"
            strokeLinejoin="round"
          ></path>
          <path
            d="M16.2302 15.0547L22.5302 15.0547L22.5302 9.00107L24.499 9.00107"
            stroke="#9AA5B8"
            strokeWidth="1.4"
            strokeLinecap="round"
            strokeLinejoin="round"
          ></path>
          <rect
            width="8.4"
            height="6.3"
            rx="0.7"
            transform="matrix(-1 0 0 1 10.3999 11.9062)"
            fill="#6C7D8F"
          ></rect>
        </g>
        <defs>
          <clipPath id="clip0_31667_57555">
            <rect width="28" height="28" fill="white"></rect>
          </clipPath>
        </defs>
      </svg>
    ),
    type: StructureType.upwardTime,
  },
  {
    name: "向下时间轴",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="28"
        height="28"
        viewBox="0 0 28 28"
        fill="none"
      >
        <g clipPath="url(#clip0_31757_133105)">
          <path
            d="M26.2122 12.5469L8.72681 12.5469"
            stroke="#9AA5B8"
            strokeWidth="1.4"
            strokeLinecap="round"
            strokeLinejoin="round"
          ></path>
          <path
            d="M8.72689 12.5469L15.0269 12.5469L15.0269 18.6005L17.2043 18.6005"
            stroke="#9AA5B8"
            strokeWidth="1.4"
            strokeLinecap="round"
            strokeLinejoin="round"
          ></path>
          <path
            d="M17.5491 12.5469L23.8491 12.5469L23.8491 18.6005L25.8179 18.6005"
            stroke="#9AA5B8"
            strokeWidth="1.4"
            strokeLinecap="round"
            strokeLinejoin="round"
          ></path>
          <rect
            width="8.4"
            height="6.3"
            rx="0.7"
            transform="matrix(-1 0 0 1 10.188 9.39844)"
            fill="#6C7D8F"
          ></rect>
        </g>
        <defs>
          <clipPath id="clip0_31757_133105">
            <rect width="28" height="28" fill="white"></rect>
          </clipPath>
        </defs>
      </svg>
    ),
    type: StructureType.downwardTime,
  },
  {
    name: "树形图",
    icon: "icon-zuoyoujiegou",
    type: StructureType.treeShape,
  },
  {
    name: "右侧树形图",
    icon: "icon-youjiegou",
    type: StructureType.rightTreeShape,
  },
  {
    name: "左侧树形图",
    icon: "icon-zuojiegou",
    type: StructureType.leftTreeShape,
  },
  {
    name: "左侧括号图",
    icon: "icon-youkuohaotu",
    type: StructureType.leftBracket,
  },
  {
    name: "右侧括号图",
    icon: "icon-zuokuohaotu",
    type: StructureType.rightBracket,
  },
];

export default function Structure() {
  const { mindProjectInfo, setMindProjectInfo } = useModel("mindMapModel");
  return (
    <>
      <Tabs>
        <Tabs.TabPane tab="结构类型" key="1">
          <div className="flex gap-4 flex-wrap justify-between px-8px">
            {structures.map((item) => (
              <div
                key={item.type}
                className="w-70px flex flex-col items-center"
              >
                <span
                  className={`
              w-50px
              h-30px
              bg-white
              inline-flex
              rounded-4px
              flex
              items-center
              justify-center
              border-1px
              border-solid
              cursor-pointer
              ${mindProjectInfo?.structure === item.type ? "border-#3f8eff" : "border-#e6ebf5"}
              `}
                  onClick={() =>
                    mindProjectInfo &&
                    setMindProjectInfo({
                      ...mindProjectInfo,
                      structure: item.type,
                    })
                  }
                >
                  {typeof item.icon === "string" ? (
                    <svg className={`w-1em h-2em fill-current text-24px`}>
                      <use xlinkHref={`#${item.icon}`} />
                    </svg>
                  ) : (
                    item.icon
                  )}
                </span>
                <div className="mt-8px text-12px color-#6c7d8f">
                  {item.name}
                </div>
              </div>
            ))}
          </div>
        </Tabs.TabPane>
      </Tabs>
    </>
  );
}
