import { Row, Col } from "antd";
import React, { useState } from "react";
import { useModel } from "umi";
import { themeData } from "@/config/flowTheme";

export default function StyleConfig() {
  const { graph } = useModel("flowchartModel");
  const { onChangePageSettings, pageState } = useModel("appModel");
  const handleChangeTheme = (item: any) => {
    onChangePageSettings("theme", item.id);

    onChangePageSettings("backgroundColor", item.pageStyle.background);
    graph?.getCells().forEach((cell) => {
      const data = cell.getData();
      if(cell.isNode() && cell.shape !== 'custom-react-image') {
        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 == pageState?.theme ? "border-#067bef" : "border-#d9e2ed"}`}
            onClick={() => handleChangeTheme(item)}
          >
            <img className="w-86px h-86px" src={item.img} />
          </div>
        </Col>
      ))}
    </Row>
  );
}
