import React, { useEffect, useState } from "react";
import CustomColorPicker from "@/components/CustomColorPicker";
import {
  Button,
  Checkbox,
  InputNumber,
  Select,
  Form,
  Popover,
  Input,
  Divider,
} from "antd";
import { QuestionCircleOutlined, SwapOutlined } from "@ant-design/icons";
import crossLineImg from "@/assets/image/linejump.png";
import noCrossLineImg from "@/assets/image/unlinejump.png";
import { useModel } from "umi";

export default function PageStyle() {
  const { pageState, onChangePageSettings } = useModel('appModel');

  const [pageType, setPageType] = useState(`自定义尺寸(${pageState.width}px*${pageState.height}px)`);

  useEffect(() => {
    const { width, height} = pageState;
    if(width === 1500 && height === 2100) {
      setPageType("1");
    }
    else if(width === 1050 && height === 1000) {
      setPageType("2");
    }
    else if(width === 700 && height === 1050) {
      setPageType("3");
    } else {
      setPageType(`自定义尺寸(${width}px*${height}px)`);
    }
  }, [pageState.width, pageState.height]);

  // 选择页面尺寸类型
  const handleChangePageType = (value: string) => {
    if(value === "1") {
      onChangePageSettings('width', 1500);
      onChangePageSettings('height', 2100);
    }
    else if(value === "2") {
      onChangePageSettings('width', 1050);
      onChangePageSettings('height', 1500);
    }
    else if(value === "3") {
      onChangePageSettings('width', 700);
      onChangePageSettings('height', 1050);
    }
    setPageType(value);
  }

  // 切换宽高值
  const handleChangeWH = () => {
    const { width, height} = pageState;
    onChangePageSettings('width', height);
    onChangePageSettings('height', width);
  }

  const [gridSizeType, setGridSizeType] = useState('2');

  useEffect(() => {
    if(pageState.gridSize >= 10) { setGridSizeType('1');}
    if(pageState.gridSize >= 15) { setGridSizeType('2');}
    if(pageState.gridSize >= 20) { setGridSizeType('3');}
    if(pageState.gridSize >= 30) { setGridSizeType('4');}
  }, [pageState.gridSize]);

  const handleChangeGridSizeType = (value: string) => {
    let size = 15;
    if(value === "1") { size = 10;}
    if(value === "2") { size = 15;}
    if(value === "3") { size = 20;}
    if(value === "4") { size = 30;}
    onChangePageSettings('gridSize', size);
    setGridSizeType(value);
  }

  return (
    <div>
      <section className="px-16px">
        <div className="flex items-center justify-between px-16px py-8px">
          <div className="flex-1 font-bold">背景样式</div>
          <CustomColorPicker
            color={pageState.backgroundColor}
            onChange={(color) => onChangePageSettings('backgroundColor', color)}
          />
        </div>
        <div className="pb-8px">
          <Select
            className="w-full"
            value={pageType}
            onChange={handleChangePageType}
            options={[
              { value: "1", label: "A3尺寸(1500px*2100px)" },
              { value: "2", label: "A4尺寸(1050px*1500px)" },
              { value: "3", label: "A5尺寸(700px*1050px)" },
            ]}
          />
        </div>
        <div className="flex justify-between pb-8px">
          <InputNumber
            value={pageState.width}
            suffix="W"
            step={1}
            min={500}
            max={10000}
            formatter={(val) => `${val}px`}
            parser={(val) => Number(val?.replace('px', ''))}
            onChange={(val) => onChangePageSettings('width', val)}
          />
          <Button icon={<SwapOutlined />} onClick={handleChangeWH}/>
          <InputNumber
            value={pageState.height}
            suffix="H"
            step={1}
            min={500}
            max={10000}
            formatter={(val) => `${val}px`}
            parser={(val) => Number(val?.replace('px', ''))}
            onChange={(val) => onChangePageSettings('height', val)}
          />
        </div>
      </section>
      <Divider className="my-8px" />
      <section className="px-16px">
        <div>
          <Checkbox checked={pageState.grid} onChange={(e) => onChangePageSettings('grid', e.target.checked)}>
            <span className="font-bold">显示网格</span>
          </Checkbox>
        </div>
        <div>
          <Form.Item
            label="网格大小"
            labelCol={{ span: 10 }}
            labelAlign="left"
            className="mb-8px"
            colon={false}
          >
            <Select
              value={gridSizeType}
              options={[
                { value: "1", label: "小" },
                { value: "2", label: "正常" },
                { value: "3", label: "大" },
                { value: "4", label: "很大" },
              ]}
              disabled={!pageState.grid}
              onChange={(val) => handleChangeGridSizeType(val)}
            />
          </Form.Item>
          <Form.Item
            label="网格尺寸"
            labelCol={{ span: 10 }}
            wrapperCol={{ span: 14 }}
            labelAlign="left"
            className="mb-8px"
            colon={false}
          >
            <InputNumber
              value={pageState.gridSize}
              className="w-full"
              step={1}
              min={10}
              max={100}
              formatter={(val) => `${val}px`}
              disabled={!pageState.grid}
              parser={(val) => Number(val?.replace('px', ''))}
              onChange={(val) => onChangePageSettings('gridSize', val)}
            />
          </Form.Item>
        </div>
      </section>
      <Divider className="my-8px" />
      <section className="px-16px">
        <div>
          <Checkbox checked={pageState.jumpOver} onChange={(e) => onChangePageSettings('jumpOver', e.target.checked)} >
            <span className="font-bold">显示跨线</span>
          </Checkbox>
          <Popover
            content={
              <div className="flex justify-between">
                <div className="mr-8px">
                  <img src={crossLineImg} alt="" />
                  <div>显示跨线</div>
                </div>
                <div>
                  <img src={noCrossLineImg} alt="" />
                  <div>不显示跨线</div>
                </div>
              </div>
            }
          >
            <QuestionCircleOutlined className="color-#999 hover:color-#666" />
          </Popover>
        </div>
      </section>
      <Divider className="my-8px" />
      {/* <section className="px-16px">
        <div>
          <Checkbox checked={pageState.printLine} onChange={(e) => onChangePageSettings('printLine', e.target.checked)} >
            <span className="font-bold">显示打印分割线</span>
          </Checkbox>
        </div>
      </section>
      <Divider className="my-8px" /> */}
      <section className="px-16px">
        <Checkbox className="mb-8px" checked={pageState.showWatermark} onChange={(e) => onChangePageSettings('showWatermark', e.target.checked)} >
          <span className="font-bold">显示水印</span>
        </Checkbox>
        <Input value={pageState.watermarkText} placeholder="不超过15字，回车保存" maxLength={15} onChange={(e) => onChangePageSettings('watermarkText', e.target.value)}/>
      </section>
    </div>
  );
}
