import { Row, Col } from "antd";
import React, { useState } from "react";
import { useModel } from "umi";

const themeData = [
  {
    id: 1,
    img: require("@/assets/image/theme/1.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#000",
      fillColor: "#fff",
      textColor: "#000",
    },
    edgeStyle: {
      strokeColor: "#000",
      textColor: "#000",
    },
  },
  {
    id: 2,
    img: require("@/assets/image/theme/2.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#adb5b8",
      fillColor: "#212930",
      textColor: "#fff",
    },
    edgeStyle: {
      strokeColor: "#212930",
      textColor: "#fff",
    },
  },
  {
    id: 3,
    img: require("@/assets/image/theme/3.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#323232",
      fillColor: "#ffffee",
      textColor: "#000",
    },
    edgeStyle: {
      strokeColor: "#323232",
      textColor: "#000",
    },
  },
  {
    id: 4,
    img: require("@/assets/image/theme/4.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#323232",
      fillColor: "#d6d6d6",
      textColor: "#000",
    },
    edgeStyle: {
      strokeColor: "#323232",
      textColor: "#000",
    },
  },
  {
    id: 5,
    img: require("@/assets/image/theme/5.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#c65132",
      fillColor: "#f4b49d",
      textColor: "#000",
    },
    edgeStyle: {
      strokeColor: "#7f2f24",
      textColor: "#c65132",
    },
  },
  {
    id: 6,
    img: require("@/assets/image/theme/6.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#000",
      fillColor: "#df9371",
      textColor: "#fff",
    },
    edgeStyle: {
      strokeColor: "#7f2f24",
      textColor: "#7f2f24",
    },
  },
  {
    id: 7,
    img: require("@/assets/image/theme/7.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#efb81b",
      fillColor: "#f6eed1",
      textColor: "#000",
    },
    edgeStyle: {
      strokeColor: "#000",
      textColor: "#000",
    },
  },
  {
    id: 8,
    img: require("@/assets/image/theme/8.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#323232",
      fillColor: "#eab00d",
      textColor: "#fff",
    },
    edgeStyle: {
      strokeColor: "#323232",
      textColor: "#323232",
    },
  },
  {
    id: 9,
    img: require("@/assets/image/theme/9.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#212930",
      fillColor: "#d4ddc0",
      textColor: "#212930",
    },
    edgeStyle: {
      strokeColor: "#212930",
      textColor: "#212930",
    },
  },
  {
    id: 10,
    img: require("@/assets/image/theme/10.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#5a801f",
      fillColor: "#aabe70",
      textColor: "#fff",
    },
    edgeStyle: {
      strokeColor: "#323232",
      textColor: "#323232",
    },
  },
  {
    id: 11,
    img: require("@/assets/image/theme/11.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#127731",
      fillColor: "#65b584",
      textColor: "#fff",
    },
    edgeStyle: {
      strokeColor: "#81c2bb",
      textColor: "#81c2bb",
    },
  },
  {
    id: 12,
    img: require("@/assets/image/theme/12.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#127731",
      fillColor: "#cbeddb",
      textColor: "#127731",
    },
    edgeStyle: {
      strokeColor: "#45afa3",
      textColor: "#45afa3",
    },
  },
  {
    id: 13,
    img: require("@/assets/image/theme/13.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#36a9cc",
      fillColor: "#b4d8d5",
      textColor: "#15475B",
    },
    edgeStyle: {
      strokeColor: "#15475B",
      textColor: "#15475B",
    },
  },
  {
    id: 14,
    img: require("@/assets/image/theme/14.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#2C769B",
      fillColor: "#36A9CC",
      textColor: "#F3DFFF",
    },
    edgeStyle: {
      strokeColor: "#3B4296",
      textColor: "#3B4296",
    },
  },
  {
    id: 15,
    img: require("@/assets/image/theme/15.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#257FD8",
      fillColor: "#BADDF7",
      textColor: "#257FD8",
    },
    edgeStyle: {
      strokeColor: "#F99D4B",
      textColor: "#F99D4B",
    },
  },
  {
    id: 16,
    img: require("@/assets/image/theme/16.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#0052A4",
      fillColor: "#257FD8",
      textColor: "#FFC192",
    },
    edgeStyle: {
      strokeColor: "#4DC3F7",
      textColor: "#4DC3F7",
    },
  },
  {
    id: 17,
    img: require("@/assets/image/theme/17.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#075B3F",
      fillColor: "#CDAAF2",
      textColor: "#075B3F",
    },
    edgeStyle: {
      strokeColor: "#108460",
      textColor: "#108460",
    },
  },
  {
    id: 18,
    img: require("@/assets/image/theme/18.svg").default,
    pageStyle: {
      background: "#fff",
    },
    nodeStyle: {
      strokeColor: "#662EAE",
      fillColor: "#AC80E5",
      textColor: "#DFEFE9",
    },
    edgeStyle: {
      strokeColor: "#97C5D3",
      textColor: "#97C5D3",
    },
  },
  {
    id: 19,
    img: require("@/assets/image/theme/19.svg").default,
    pageStyle: {
      background: "#363332",
    },
    nodeStyle: {
      strokeColor: "#7F2F24",
      fillColor: "#DF9371",
      textColor: "#7F2F24",
    },
    edgeStyle: {
      strokeColor: "#AC3832",
      textColor: "#AC3832",
    },
  },
  {
    id: 20,
    img: require("@/assets/image/theme/20.svg").default,
    pageStyle: {
      background: "#413E38",
    },
    nodeStyle: {
      strokeColor: "#E4D599",
      fillColor: "#EFB81B",
      textColor: "#fff",
    },
    edgeStyle: {
      strokeColor: "#E8D591",
      textColor: "#E8D591",
    },
  },
  {
    id: 21,
    img: require("@/assets/image/theme/21.svg").default,
    pageStyle: {
      background: "#4C4D48",
    },
    nodeStyle: {
      strokeColor: "#E7F4C1",
      fillColor: "#A3B269",
      textColor: "#FFF7E1",
    },
    edgeStyle: {
      strokeColor: "#FFE68C",
      textColor: "#FFE68C",
    },
  },
  {
    id: 22,
    img: require("@/assets/image/theme/22.svg").default,
    pageStyle: {
      background: "#272828",
    },
    nodeStyle: {
      strokeColor: "#096834",
      fillColor: "#A7D3B7",
      textColor: "#096834",
    },
    edgeStyle: {
      strokeColor: "#92AEF4",
      textColor: "#92AEF4",
    },
  },
  {
    id: 23,
    img: require("@/assets/image/theme/23.svg").default,
    pageStyle: {
      background: "#202B36",
    },
    nodeStyle: {
      strokeColor: "#C5F9FF",
      fillColor: "#7AC4BB",
      textColor: "#1B6499",
    },
    edgeStyle: {
      strokeColor: "#B1C7FF",
      textColor: "#B1C7FF",
    },
  },
  {
    id: 24,
    img: require("@/assets/image/theme/24.svg").default,
    pageStyle: {
      background: "#0D141C",
    },
    nodeStyle: {
      strokeColor: "#D9E2ED",
      fillColor: "#257FD8",
      textColor: "#fff",
    },
    edgeStyle: {
      strokeColor: "#FF9357",
      textColor: "#FF9357",
    },
  },
  {
    id: 25,
    img: require("@/assets/image/theme/25.svg").default,
    pageStyle: {
      background: "#453B51",
    },
    nodeStyle: {
      strokeColor: "#823FBC",
      fillColor: "#AC80E5",
      textColor: "#FFE6AE",
    },
    edgeStyle: {
      strokeColor: "#FFD366",
      textColor: "#FFD366",
    },
  },
  {
    id: 26,
    img: require("@/assets/image/theme/26.svg").default,
    pageStyle: {
      background: "#242424",
    },
    nodeStyle: {
      strokeColor: "#D2D2D2",
      fillColor: "#9E9E9E",
      textColor: "#fff",
    },
    edgeStyle: {
      strokeColor: "#9E9E9E",
      textColor: "#9E9E9E",
    },
  },
];

export default function StyleConfig() {
  const { graph } = useModel("graphModel");
  const { onChangePageSettings } = useModel("appModel");
  const [theme, setTheme] = useState(1);
  const handleChangeTheme = (item: any) => {
    setTheme(item.id);
    onChangePageSettings("backgroundColor", item.pageStyle.background);
    graph?.getCells().forEach((cell) => {
      const data = cell.getData();
      if(cell.isNode()) {
        cell.setData({
          ...data,
          text: {
            ...data.text,
            color: item.nodeStyle.textColor
          },
          fill: {
            ...data.fill,
            fillType: "color",
            color1: item.nodeStyle.fillColor
          },
          stroke: {
            ...data.stroke,
            color: item.nodeStyle.strokeColor
          }
        })
      }
      if(cell.isEdge()) {
        const attr = cell.attrs;
        cell.setAttrs({
          line: {
            ...(attr?.line || {}),
            stroke: item.edgeStyle.strokeColor,
          }
        })
      }
    });
  };
  return (
    <Row justify="space-between" gutter={[8, 16]} className="px-16px">
      {themeData.map((item) => (
        <Col key={item.id} xs={12} sm={12} md={12} lg={12} xl={12} xxl={12}>
          <div
            className={`w-86px h-86px rounded-8px border border-solid border-1px hover:border-#067bef cursor-pointer ${item.id === theme ? "border-#067bef" : "border-#d9e2ed"}`}
            onClick={() => handleChangeTheme(item)}
          >
            <img className="w-86px h-86px" src={item.img} />
          </div>
        </Col>
      ))}
    </Row>
  );
}
