import { Card, Col, Collapse, Result, Row } from "antd";
//import { JsonEditor as Editor } from "jsoneditor-react";
//import "jsoneditor-react/es/editor.min.css";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import { selectCurrentUser } from "../../redux/user/user.selectors";
import JobCalculateTotals from "../job-calculate-totals/job-calculate-totals.component";
import "./job-totals-table.styles.scss";
import JobTotalsTableLabor from "./job-totals.table.labor.component";
import JobTotalsTableOther from "./job-totals.table.other.component";
import JobTotalsTableParts from "./job-totals.table.parts.component";
import JobTotalsTableTotals from "./job-totals.table.totals.component";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  jobRO: selectJobReadOnly,
});

const colSpan = {
  md: { span: 24 },
  lg: { span: 12 },
};

export function JobsTotalsTableComponent({ jobRO, currentUser, job }) {
  const { t } = useTranslation();

  if (!!!job.job_totals) {
    return (
      <Card>
        <Result
          title={t("jobs.errors.nofinancial")}
          extra={<JobCalculateTotals job={job} disabled={jobRO} />}
        />
      </Card>
    );
  }

  return (
    <div>
      <Row gutter={[16, 16]}>
        <Col {...colSpan}>
          <Card title={t("jobs.labels.labortotals")}>
            <JobTotalsTableLabor job={job} />
          </Card>
        </Col>
        <Col {...colSpan}>
          <Row gutter={[16, 16]}>
            <Col {...colSpan}>
              <Row gutter={[16, 16]}>
                <Col span={24}>
                  <Card title={t("jobs.labels.partstotal")}>
                    <JobTotalsTableParts job={job} />
                  </Card>
                </Col>
                <Col span={24}>
                  <Card title={t("jobs.labels.othertotal")}>
                    <JobTotalsTableOther job={job} />
                  </Card>
                </Col>
              </Row>
            </Col>
            <Col {...colSpan}>
              <Card title={t("jobs.labels.jobtotals")}>
                <JobTotalsTableTotals job={job} />
              </Card>
            </Col>
            {currentUser.email.includes("@imex.") && (
              <Col span={24}>
                <Card title="DEVELOPMENT USE ONLY">
                  <JobCalculateTotals job={job} disabled={jobRO} />
                  <Collapse>
                    <Collapse.Panel header="JSON Tree Totals">
                      <div>
                        <pre>
                          {JSON.stringify(
                            {
                              CIECA: job.cieca_ttl && job.cieca_ttl.data,
                              CIECASTL: job.cieca_stl && job.cieca_stl.data,
                              ImEXCalc: job.job_totals,
                            },
                            null,
                            2
                          )}
                        </pre>
                      </div>
                    </Collapse.Panel>
                  </Collapse>
                </Card>
              </Col>
            )}
          </Row>
        </Col>
      </Row>
    </div>
  );
}
export default connect(mapStateToProps, null)(JobsTotalsTableComponent);