import { Tabs } from "antd";
import React from "react";
import { useModel } from "umi";
import { changeTheme } from "../../render/theme";
import { useMindMapStore } from "../../models/mindMapModel";

const themes = [
  {
    key: "default",
    image: require("@/assets/mindmap/bg_caihong.svg").default,
  },
  {
    key: "theme2",
    image: require("@/assets/mindmap/basic4.svg").default,
  },
  {
    key: "theme3",
    image: require("@/assets/mindmap/basic5.svg").default,
  },
  {
    key: "theme4",
    image: require("@/assets/mindmap/bd_caihong.svg").default,
  },
  {
    key: "theme5",
    image: require("@/assets/mindmap/artistic_song.svg").default,
  },
];
export default function Theme() {
  const { setMindProjectInfo } = useModel("mindmap.mindMapModel");
  const mindProjectInfo = useMindMapStore((state) => state.mindProjectInfo);

  const handleChangeTheme = (theme: string) => {
    if (mindProjectInfo) {
      const newInfo = changeTheme(theme, mindProjectInfo);
      mindProjectInfo &&
        setMindProjectInfo({
          info: {
            ...newInfo,
            theme,
          }
        });
    }
  };

  return (
    <Tabs>
      <Tabs.TabPane key="1" tab="风格">
        <div
          className={`
          flex
          flex-wrap
          px-8px
          gap-5
          justify-between
          `}
        >
          {themes.map((item) => (
            <div
              className={`
              h-60px
              bg-white
              inline-flex
              rounded-4px
              flex
              items-center
              justify-center
              border-1px
              border-solid
              cursor-pointer
              overflow-hidden
            `}
              style={{
                borderColor:
                  item.key === mindProjectInfo?.theme ? "#1890ff" : "#e6ebf5",
              }}
              onClick={() => handleChangeTheme(item.key)}
              key={item.key}
            >
              <img src={item.image} className="h-full" />
            </div>
          ))}
        </div>
      </Tabs.TabPane>
    </Tabs>
  );
}
