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";

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

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({
  jobRO,
  job,
  jobId,
  joblines,
  timetickets,
  refetch,
  loading,
  techConsole,
  adjustments,
}) {
  return (
    <Row gutter={[16, 16]}>
      <Col {...ticketSpan}>
        <TimeTicketList
          loading={loading}
          timetickets={timetickets}
          refetch={refetch}
          techConsole={techConsole}
          disabled={jobRO || (job && !job.converted)}
          jobId={jobId}
        />
      </Col>
      <Col {...adjSpan}>
        <LaborAllocationsTableComponent
          jobId={jobId}
          joblines={joblines}
          timetickets={timetickets}
          adjustments={adjustments}
        />
      </Col>
      <Col {...adjSpan}>
        <PayrollLaborAllocationsTable
          jobId={jobId}
          joblines={joblines}
          timetickets={timetickets}
          adjustments={adjustments}
        />
      </Col>
    </Row>
  );
}