import React, { useEffect, useState } from "react";
import CustomColorPicker from "@/components/CustomColorPicker";
import { Checkbox, InputNumber, Select, Input, Divider } from "antd";
import { useModel } from "umi";
import { ColumnHeightOutlined, ColumnWidthOutlined } from "@ant-design/icons";

export default function PageStyle() {
  const { mindProjectInfo, setMindProjectInfo } = useModel("mindMapModel");

  const pageSetting = mindProjectInfo?.pageSetting;
  const [watermark, setWatermark] = useState(pageSetting?.watermark);

  const handleSetPageSetting = (key: string, value: any) => {
    if (pageSetting) {
      setMindProjectInfo({
        ...mindProjectInfo,
        pageSetting: {
          ...pageSetting,
          [key]: value,
        },
      });
    }
  };

  return (
    <div>
      <section className="px-16px">
        <div className="flex-1 font-bold">背景样式</div>
        <div className="flex items-center justify-between px-0px py-8px gap-16px">
          <Select
            className="flex-1"
            options={[
              { label: "纯色", value: "color" },
              { label: "图片", value: "image" },
            ]}
            value={pageSetting?.fillType}
            onChange={(value) => handleSetPageSetting("fillType", value)}
          />
          <CustomColorPicker
            disabled={pageSetting?.fillType !== "color"}
            color={pageSetting?.fill}
            onChange={(color) => handleSetPageSetting("fill", color)}
          />
        </div>
        {pageSetting?.fillType === "image" && (
          <div className="flex justify-between items-center gap-16px">
            <span>图片地址</span>
            <Input
              className="flex-1"
              placeholder="请输入图片地址"
              value={pageSetting?.fillImageUrl}
              onChange={(e) =>
                handleSetPageSetting("fillImageUrl", e.target.value)
              }
            />
          </div>
        )}
        <Divider className="my-8px" />
        <div className="flex-1 font-bold">主题间距</div>
        <div className="text-12px color-#6c7d8f my-4px">分支主题</div>
        <div className="flex justify-between gap-8px">
          <InputNumber
            className="flex-1"
            suffix={<ColumnHeightOutlined />}
            step={1}
            min={10}
            max={200}
            formatter={(val) => `${val}px`}
            value={pageSetting?.branchY}
            onChange={(val) => handleSetPageSetting("branchY", val)}
          />
          <InputNumber
            className="flex-1"
            suffix={<ColumnWidthOutlined />}
            step={1}
            min={20}
            max={200}
            formatter={(val) => `${val}px`}
            value={pageSetting?.branchX}
            onChange={(val) => handleSetPageSetting("branchX", val)}
          />
        </div>
        {/* <div className="text-12px color-#6c7d8f my-4px">子主题</div>
        <div className="flex justify-between gap-8px">
          <InputNumber
            className="flex-1"
            suffix={<ColumnHeightOutlined />}
            step={1}
            min={5}
            max={100}
            formatter={(val) => `${val}px`}
            value={pageSetting?.subTopicY}
            onChange={(val) => handleSetPageSetting("subTopicY", val)}
          />
          <InputNumber
            className="flex-1"
            suffix={<ColumnWidthOutlined />}
            step={1}
            min={20}
            max={100}
            formatter={(val) => `${val}px`}
            value={pageSetting?.subTopicX}
            onChange={(val) => handleSetPageSetting("subTopicX", val)}
          />
        </div> */}
      </section>
      <section className="px-16px my-8px">
        <div>
          <Checkbox
            checked={pageSetting?.alignSameTopic}
            onChange={(e) =>
              handleSetPageSetting("alignSameTopic", e.target.checked)
            }
          >
            <span className="font-bold">同级主题对齐</span>
          </Checkbox>
        </div>
      </section>
      <Divider className="my-8px" />
      <section className="px-16px">
        <Checkbox
          className="mb-8px"
          checked={pageSetting?.showWatermark}
          onChange={(e) =>
            handleSetPageSetting("showWatermark", e.target.checked)
          }
        >
          <span className="font-bold">显示水印</span>
        </Checkbox>
        <Input
          placeholder="不超过15字，回车保存"
          maxLength={15}
          value={watermark}
          onChange={(e) => setWatermark(e.target.value)}
          onPressEnter={() => handleSetPageSetting("watermark", watermark)}
          onBlur={() => handleSetPageSetting("watermark", watermark)}
        />
      </section>
    </div>
  );
}