import { Collapse } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { setEmailOptions } from "../../redux/email/email.actions";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectPrintCenter } from "../../redux/modals/modals.selectors";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import JobsReports from "./print-center-jobs.list";
import PrintCenterItem from "../print-center-item/print-center-item.component";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  bodyshop: selectBodyshop,
  printCenterModal: selectPrintCenter,
});
const mapDispatchToProps = (dispatch) => ({
  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
  toggleModalVisible: () => dispatch(toggleModalVisible("printCenter")),
});
export function PrintCenterJobsComponent({ printCenterModal }) {
  const { t } = useTranslation();
  const { id: jobid } = printCenterModal.context;

  const JobsReportsList = JobsReports(null);

  return (
    <div>
      Print Center Jobs COmponetn
      <Collapse accordion>
        {JobsReportsList.map((section) => (
          <Collapse.Panel key={section.key} header={section.title}>
            <ul style={{ columns: "2 auto" }}>
              {section.items.map((item) => (
                <PrintCenterItem key={item.key} item={item} />
              ))}
            </ul>
          </Collapse.Panel>
        ))}
      </Collapse>
    </div>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(PrintCenterJobsComponent);