import React, { useEffect } from "react";
import { observer } from "mobx-react";
import { Button, Drawer, Space } from "antd";
import type { DrawerProps } from "antd/es/drawer";
import { DownloadOutlined, PrinterOutlined } from "@ant-design/icons";
import { useMobStore } from "@/hooks";
import { toJS } from "mobx";
import styles from "./index.less";
import Trans from "@/utils/locale";

interface IProps extends DrawerProps {}

const Index: React.FC<IProps> = observer((props) => {
  const store = useMobStore("hiprintStore");

  useEffect(() => {
    console.log("draw", toJS(store)?.hiprintTemplate?.getHtml());
    props.open && $("#preview_content_design").html(toJS(store)?.hiprintTemplate?.getHtml());
    return () => {};
  }, [props.open]);
  const print = () => {
    store?.hiprintTemplate.print(
      {},
      {},
      {
        callback: () => {
          console.log("callback");
        }
      }
    );
  };
  const toPdf = () => {
    store?.hiprintTemplate.toPdf({}, "打印预览");
  };
  return (
    <Drawer
      {...props}
      width={toJS(store)?.hiprintTemplate?.editingPanel?.width + "mm"}
      title="打印预览"
      placement="right"
      className={styles.previewHiprintDesign}
      extra={
        <Space>
          <Button type="primary" icon={<PrinterOutlined />} onClick={print}>
            打印
          </Button>
          <Button type="ghost" icon={<DownloadOutlined />} onClick={toPdf}>
            pdf<Trans>Address</Trans>
          </Button>
        </Space>
      }
    >
      <div id="preview_content_design" />
    </Drawer>
  );
});

export default Index;