import { Tabs } from "antd";
import { useModel } from "umi";
import { cloneDeep } from "lodash-es"

const icons = [
  {
    name: "优先级",
    children: [
      {
        name: 1,
        icon: "icon-siweidaotu-tubiaojiyihebing64_huaban1",
      },
      {
        name: 2,
        icon: "icon-siweidaotu-tubiaojiyihebing64-02",
      },
      {
        name: 3,
        icon: "icon-siweidaotu-tubiaojiyihebing64-03",
      },
      {
        name: 4,
        icon: "icon-siweidaotu-tubiaojiyihebing64-04",
      },
      {
        name: 5,
        icon: "icon-siweidaotu-tubiaojiyihebing64-05",
      },
      {
        name: 6,
        icon: "icon-siweidaotu-tubiaojiyihebing64-06",
      },
      {
        name: 7,
        icon: "icon-siweidaotu-tubiaojiyihebing64-07",
      },
      {
        name: 8,
        icon: "icon-siweidaotu-tubiaojiyihebing64-08",
      },
      {
        name: 9,
        icon: "icon-siweidaotu-tubiaojiyihebing64-09",
      },
    ],
  },
  {
    name: "进度",
    children: [
      {
        name: 1,
        icon: "icon-siweidaotu-tubiaojiyihebing64-11",
      },
      {
        name: 2,
        icon: "icon-siweidaotu-tubiaojiyihebing64-12",
      },
      {
        name: 3,
        icon: "icon-siweidaotu-tubiaojiyihebing64-13",
      },
      {
        name: 4,
        icon: "icon-siweidaotu-tubiaojiyihebing64-14",
      },
      {
        name: 5,
        icon: "icon-siweidaotu-tubiaojiyihebing64-15",
      },
      {
        name: 6,
        icon: "icon-siweidaotu-tubiaojiyihebing64-15",
      },
      {
        name: 7,
        icon: "icon-siweidaotu-tubiaojiyihebing64-16",
      },
      {
        name: 8,
        icon: "icon-siweidaotu-tubiaojiyihebing64-17",
      },
      {
        name: 9,
        icon: "icon-siweidaotu-tubiaojiyihebing64-18",
      },
    ],
  },
  {
    name: "旗帜",
    children: [
      {
        name: 1,
        icon: "icon-siweidaotu-tubiaojiyihebing64-19",
      },
      {
        name: 2,
        icon: "icon-siweidaotu-tubiaojiyihebing64-20",
      },
      {
        name: 3,
        icon: "icon-siweidaotu-tubiaojiyihebing64-21",
      },
      {
        name: 4,
        icon: "icon-siweidaotu-tubiaojiyihebing64-22",
      },
      {
        name: 5,
        icon: "icon-siweidaotu-tubiaojiyihebing64-23",
      },
      {
        name: 6,
        icon: "icon-siweidaotu-tubiaojiyihebing64-24",
      },
      {
        name: 7,
        icon: "icon-siweidaotu-tubiaojiyihebing64-25",
      },
    ],
  },
  {
    name: "星星",
    children: [
      {
        name: 1,
        icon: "icon-siweidaotu-tubiaojiyihebing64-30",
      },
      {
        name: 2,
        icon: "icon-siweidaotu-tubiaojiyihebing64-28",
      },
      {
        name: 3,
        icon: "icon-siweidaotu-tubiaojiyihebing64-34",
      },
      {
        name: 4,
        icon: "icon-siweidaotu-tubiaojiyihebing64-36",
      },
      {
        name: 5,
        icon: "icon-siweidaotu-tubiaojiyihebing64-29",
      },
      {
        name: 6,
        icon: "icon-siweidaotu-tubiaojiyihebing64-33",
      },
      {
        name: 7,
        icon: "icon-siweidaotu-tubiaojiyihebing64-32",
      },
      {
        name: 8,
        icon: "icon-siweidaotu-tubiaojiyihebing64-31",
      },
      {
        name: 9,
        icon: "icon-siweidaotu-tubiaojiyihebing64-35",
      },
    ],
  },
  {
    name: "人物",
    children: [
      {
        name: 1,
        icon: "icon-siweidaotu-tubiaojiyihebing64-37",
      },
      {
        name: 2,
        icon: "icon-siweidaotu-tubiaojiyihebing64-43",
      },
      {
        name: 3,
        icon: "icon-siweidaotu-tubiaojiyihebing64-41",
      },
      {
        name: 4,
        icon: "icon-siweidaotu-tubiaojiyihebing64-40",
      },
      {
        name: 5,
        icon: "icon-siweidaotu-tubiaojiyihebing64-38",
      },
      {
        name: 6,
        icon: "icon-siweidaotu-tubiaojiyihebing64-42",
      },
      {
        name: 7,
        icon: "icon-siweidaotu-tubiaojiyihebing64-45",
      },
      {
        name: 8,
        icon: "icon-siweidaotu-tubiaojiyihebing64-44",
      },
      {
        name: 9,
        icon: "icon-siweidaotu-tubiaojiyihebing64-39",
      },
    ],
  },
  {
    name: "其他",
    children: [
      {
        name: 1,
        icon: "icon-siweidaotu-tubiaojiyihebing64-46",
      },
      {
        name: 2,
        icon: "icon-siweidaotu-tubiaojiyihebing64-47",
      },
      {
        name: 3,
        icon: "icon-siweidaotu-tubiaojiyihebing64-48",
      },
      {
        name: 4,
        icon: "icon-siweidaotu-tubiaojiyihebing64-49",
      },
      {
        name: 5,
        icon: "icon-siweidaotu-tubiaojiyihebing64-50",
      },
      {
        name: 6,
        icon: "icon-siweidaotu-tubiaojiyihebing64-55",
      },
      {
        name: 7,
        icon: "icon-siweidaotu-tubiaojiyihebing64-51",
      },
      {
        name: 8,
        icon: "icon-siweidaotu-tubiaojiyihebing64-60",
      },
      {
        name: 9,
        icon: "icon-siweidaotu-tubiaojiyihebing64-63",
      },
      {
        name: 10,
        icon: "icon-siweidaotu-tubiaojiyihebing64-54",
      },
      {
        name: 11,
        icon: "icon-siweidaotu-tubiaojiyihebing64-62",
      },
      {
        name: 12,
        icon: "icon-siweidaotu-tubiaojiyihebing64-67",
      },
      {
        name: 13,
        icon: "icon-siweidaotu-tubiaojiyihebing64-65",
      },
      {
        name: 14,
        icon: "icon-siweidaotu-tubiaojiyihebing64-56",
      },
      {
        name: 15,
        icon: "icon-siweidaotu-tubiaojiyihebing64-10",
      },
      {
        name: 16,
        icon: "icon-siweidaotu-tubiaojiyihebing64-57",
      },
      {
        name: 17,
        icon: "icon-siweidaotu-tubiaojiyihebing64-52",
      },
      {
        name: 18,
        icon: "icon-siweidaotu-tubiaojiyihebing64-53",
      },
      {
        name: 19,
        icon: "icon-siweidaotu-tubiaojiyihebing64-59",
      },
      {
        name: 20,
        icon: "icon-siweidaotu-tubiaojiyihebing64-61",
      },
      {
        name: 21,
        icon: "icon-siweidaotu-tubiaojiyihebing64-64",
      },
      {
        name: 22,
        icon: "icon-siweidaotu-tubiaojiyihebing64-66",
      },
      {
        name: 23,
        icon: "icon-siweidaotu-tubiaojiyihebing64-58",
      },
      {
        name: 24,
        icon: "icon-siweidaotu-tubiaojiyihebing64-71",
      },
      {
        name: 25,
        icon: "icon-siweidaotu-tubiaojiyihebing64-69",
      },
      {
        name: 26,
        icon: "icon-siweidaotu-tubiaojiyihebing64-72",
      },
      {
        name: 27,
        icon: "icon-siweidaotu-tubiaojiyihebing64-68",
      },
      {
        name: 28,
        icon: "icon-siweidaotu-tubiaojiyihebing64-70",
      },
    ],
  },
];

export default function IconConfig() {
  const { selectedCell } = useModel("mindmap.mindMapModel");

  const handleClick = (icon: string) => {
    selectedCell.forEach(cell => {
      if(cell.isNode()) {
        const icons = cloneDeep(cell.getData()?.icons || []);
        if(!icons.includes(icon)) {
          icons.push(icon);
        } else {
          icons.splice(icons.indexOf(icon), 1);
        };

        cell.setData({
          icons
        }, {
          deep: false,
        });
      }
    })
  };

  return (
    <div className={`px-16px ${!selectedCell.length ? 'opacity-50' : ''}`}>
      <Tabs
        items={[
          {
            key: "1",
            label: "图标",
            children: (
              <div>
                {icons.map((item, index) => {
                  return (
                    <div key={item.name}>
                      <div className={`text-14px color-#000 font-bold my-16px ${index === 0 ? 'mt-0' : ''}`}>
                        {item.name}
                      </div>
                      <div className="flex gap-6px flex-wrap text-20px">
                        {item.children.map((iconItem) => {
                          return (
                            <svg
                              key={iconItem.name}
                              className={`icon ${ !selectedCell.length ? 'cursor-default' : 'cursor-pointer'}`}
                              aria-hidden="true"
                              onClick={() => handleClick(iconItem.icon)}
                            >
                              <use xlinkHref={`#${iconItem.icon}`}></use>
                            </svg>
                          );
                        })}
                      </div>
                    </div>
                  );
                })}
              </div>
            ),
          },
        ]}
      />
    </div>
  );
}
