import { Card, Col, Collapse, Result, Row } from "antd";
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, refetch }) {
  const { t } = useTranslation();

  if (!job.job_totals) {
    return (
      <Card>
        <Result
          title={t("jobs.errors.nofinancial")}
          extra={<JobCalculateTotals job={job} disabled={jobRO} refetch={refetch} />}
        />
      </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.") || currentUser.email.includes("@rome.")) && (
              <Col span={24}>
                <Card title="DEVELOPMENT USE ONLY">
                  <JobCalculateTotals job={job} disabled={jobRO} refetch={refetch} />
                  <Collapse
                    items={[
                      {
                        key: "json-totals",
                        label: "JSON Tree Totals",
                        children: (
                          <div>
                            <pre>
                              {JSON.stringify(
                                {
                                  CIECA: job.cieca_ttl?.data,
                                  CIECASTL: job.cieca_stl?.data,
                                  ImEXCalc: job.job_totals
                                },
                                null,
                                2
                              )}
                            </pre>
                          </div>
                        )
                      }
                    ]}
                  />
                </Card>
              </Col>
            )}
          </Row>
        </Col>
      </Row>
    </div>
  );
}

export default connect(mapStateToProps, null)(JobsTotalsTableComponent);
