import { Divider, Form, Select } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import JobSearchSelect from "../job-search-select/job-search-select.component";
import JobsDetailLaborContainer from "../jobs-detail-labor/jobs-detail-labor.container";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  technician: selectTechnician
});

export function TechClockInComponent({ form, bodyshop, technician }) {
  const { t } = useTranslation();

  const {
    treatments: { Enhanced_Payroll }
  } = useTreatmentsWithConfig({
    attributes: {},
    names: ["Enhanced_Payroll"],
    splitKey: bodyshop.imexshopid
  });

  const emps = bodyshop.employees.filter((e) => e.id === technician.id)[0];

  return (
    <div>
      <LayoutFormRow grow noDivider>
        <Form.Item
          name="jobid"
          label={t("jobs.fields.ro_number")}
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <JobSearchSelect
            convertedOnly={!bodyshop.tt_allow_post_to_invoiced}
            notExported={!bodyshop.tt_allow_post_to_invoiced}
            notInvoiced={!bodyshop.tt_allow_post_to_invoiced}
          />
        </Form.Item>

        <Form.Item
          name="cost_center"
          label={t("timetickets.fields.cost_center")}
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Select
            options={
              emps &&
              emps.rates.map((item) => ({
                value: item.cost_center,
                label:
                  item.cost_center === "timetickets.labels.shift"
                    ? t(item.cost_center)
                    : bodyshop.cdk_dealerid ||
                        bodyshop.pbs_serialnumber ||
                        bodyshop.rr_dealerid ||
                        Enhanced_Payroll.treatment === "on"
                      ? t(`joblines.fields.lbr_types.${item.cost_center.toUpperCase()}`)
                      : item.cost_center
              }))
            }
          />
        </Form.Item>
      </LayoutFormRow>
      <Divider />
      <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.jobid !== curValues.jobid}>
        {() => {
          if (!form.getFieldValue("jobid")) return null;
          return <JobsDetailLaborContainer jobId={form.getFieldValue("jobid")} techConsole />;
        }}
      </Form.Item>
    </div>
  );
}

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