import { Modal } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectPrintCenter } from "../../redux/modals/modals.selectors";
import PrintCenterModalComponent from "./print-center-modal.component";
import "./print-center-modal.styles.scss";

const mapStateToProps = createStructuredSelector({
  printCenterModal: selectPrintCenter
});

const mapDispatchToProps = (dispatch) => ({
  toggleModalVisible: () => dispatch(toggleModalVisible("printCenter"))
});

export function PrintCenterModalContainer({ printCenterModal, toggleModalVisible }) {
  const { t } = useTranslation();

  const { open, context } = printCenterModal;
  //const { type } = context;
  // const { refetch } = actions;

  return (
    <Modal
      open={open}
      onOk={() => toggleModalVisible()}
      onCancel={() => toggleModalVisible()}
      cancelButtonProps={{ style: { display: "none" } }}
      okText={t("general.actions.close")}
      width="90%"
      title={t("printcenter.labels.title")}
      destroyOnClose
    >
      <PrintCenterModalComponent context={context} />
    </Modal>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(PrintCenterModalContainer);