import { Col, Row } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import LaborAllocationsTableComponent from "../labor-allocations-table/labor-allocations-table.component";
import TimeTicketList from "../time-ticket-list/time-ticket-list.component";
import PayrollLaborAllocationsTable from "../labor-allocations-table/labor-allocations-table.payroll.component";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { useSplitTreatments } from "@splitsoftware/splitio-react";

const mapStateToProps = createStructuredSelector({
  jobRO: selectJobReadOnly,
  bodyshop: selectBodyshop
});

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

const ticketSpan = {
  xs: {
    span: 24
  },
  sm: {
    span: 24
  },
  md: {
    span: 24
  },
  lg: {
    span: 24
  },
  xl: {
    span: 16
  }
};
const adjSpan = {
  xs: {
    span: 24
  },
  sm: {
    span: 24
  },
  md: {
    span: 24
  },
  lg: {
    span: 24
  },
  xl: {
    span: 8
  }
};

export function JobsDetailLaborContainer({
  bodyshop,
  jobRO,
  job,
  jobId,
  joblines,
  timetickets,
  refetch,
  loading,
  techConsole,
  adjustments
}) {
  const {
    treatments: { Enhanced_Payroll }
  } = useSplitTreatments({
    attributes: {},
    names: ["Enhanced_Payroll"],
    splitKey: bodyshop.imexshopid
  });

  return (
    <Row gutter={[16, 16]}>
      <Col {...ticketSpan}>
        <TimeTicketList
          loading={loading}
          timetickets={timetickets}
          refetch={refetch}
          techConsole={techConsole}
          disabled={jobRO || (job && !job.converted)}
          jobId={jobId}
        />
      </Col>

      {Enhanced_Payroll.treatment === "on" ? (
        <Col {...adjSpan}>
          <PayrollLaborAllocationsTable
            jobId={jobId}
            joblines={joblines}
            timetickets={timetickets}
            refetch={refetch}
            adjustments={adjustments}
          />
        </Col>
      ) : (
        <Col {...adjSpan}>
          <LaborAllocationsTableComponent
            jobId={jobId}
            joblines={joblines}
            timetickets={timetickets}
            refetch={refetch}
            adjustments={adjustments}
          />
        </Col>
      )}
    </Row>
  );
}