import { MailOutlined, PrinterOutlined } from "@ant-design/icons";
import { Space, Spin } from "antd";
import React, { useState } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { setEmailOptions } from "../../redux/email/email.actions";
import { selectPrintCenter } from "../../redux/modals/modals.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { GenerateDocument } from "../../utils/RenderTemplate";
const mapStateToProps = createStructuredSelector({
  printCenterModal: selectPrintCenter,
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
});

export function PrintCenterItemComponent({
  printCenterModal,
  setEmailOptions,
  item,
  id,
  bodyshop,
  disabled,
}) {
  const [loading, setLoading] = useState(false);
  const { context } = printCenterModal;
  const renderToNewWindow = async () => {
    setLoading(true);
    await GenerateDocument(
      {
        name: item.key,
        variables: { id: id },
      },
      {},
      "p"
    );
    setLoading(false);
  };

  if (disabled) return <li className="print-center-item">{item.title} </li>;
  return (
    <li>
      <Space wrap>
        {item.title}
        <PrinterOutlined onClick={renderToNewWindow} />
        <MailOutlined
          onClick={() => {
            GenerateDocument(
              {
                name: item.key,
                variables: { id: id },
              },
              { to: context.job && context.job.ownr_ea, subject: item.subject },
              "e",
              id
            );
          }}
        />
        {loading && <Spin />}
      </Space>
    </li>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PrintCenterItemComponent);
