bodyshop/client/src/components/jobs-detail-rates/jobs-detail-rates.taxes.component.jsx

import { Collapse, Divider, Form, Input, InputNumber, Space } from "antd";
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 { selectBodyshop } from "../../redux/user/user.selectors";
const mapStateToProps = createStructuredSelector({
  jobRO: selectJobReadOnly,
  bodyshop: selectBodyshop,
});

export function JobsDetailRatesTaxes({
  jobRO,
  expanded,
  bodyshop,
  required = true,
  form,
}) {
  const { t } = useTranslation();
  const formItems = [];
  for (let tyCounter = 1; tyCounter <= 5; tyCounter++) {
    const section = [];

    section.push(
      TaxFormItems({
        typeNum: tyCounter,
        rootElements: true,
        bodyshop,
        jobRO,
      })
    );

    for (let iterator = 1; iterator <= 5; iterator++) {
      section.push(
        TaxFormItems({
          typeNum: tyCounter,
          typeNumIterator: iterator,
          rootElements: false,
          jobRO,
        })
      );
    }
    formItems.push(Space({ children: section, wrap: true }));
    formItems.push(<Divider />);
  }
  return (
    <Collapse defaultActiveKey={expanded && "rates"}>
      <Collapse.Panel
        forceRender
        header={t("jobs.labels.cieca_pft")}
        key="cieca_pft"
      >
        {formItems}
      </Collapse.Panel>
    </Collapse>
  );
}
export default connect(mapStateToProps, null)(JobsDetailRatesTaxes);

function TaxFormItems({
  typeNum,
  typeNumIterator,
  rootElements,
  bodyshopjobRO,
  jobRO,
}) {
  const { t } = useTranslation();

  if (rootElements)
    return (
      <>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_tax_type", {
            typeNum,
            typeNumIterator,
          })}
          // rules={[
          //   {
          //     required: true,
          //     //message: t("general.validation.required"),
          //   },
          // ]}
          name={["cieca_pft", `tax_type${typeNum}`]}
        >
          <Input disabled={jobRO} />
        </Form.Item>
      </>
    );

  return (
    <>
      <Form.Item
        label={t("bodyshop.fields.responsibilitycenter_tax_tier", {
          typeNum,
          typeNumIterator,
        })}
        rules={[
          {
            required: true,
            //message: t("general.validation.required"),
          },
        ]}
        name={["cieca_pft", `ty${typeNum}_tier${typeNumIterator}`]}
      >
        <InputNumber precision={0} min={0} disabled={jobRO} />
      </Form.Item>
      <Form.Item
        label={t("bodyshop.fields.responsibilitycenter_tax_thres", {
          typeNum,
          typeNumIterator,
        })}
        rules={[
          {
            required: true,
            //message: t("general.validation.required"),
          },
        ]}
        name={["cieca_pft", `ty${typeNum}_thres${typeNumIterator}`]}
      >
        <InputNumber min={0} precision={2} disabled={jobRO} />
      </Form.Item>
      <Form.Item
        label={t("bodyshop.fields.responsibilitycenter_tax_rate", {
          typeNum,
          typeNumIterator,
        })}
        rules={[
          {
            required: true,
            //message: t("general.validation.required"),
          },
        ]}
        name={["cieca_pft", `ty${typeNum}_rate${typeNumIterator}`]}
      >
        <InputNumber min={0} precision={2} disabled={jobRO} />
      </Form.Item>
      <Form.Item
        label={t("bodyshop.fields.responsibilitycenter_tax_sur", {
          typeNum,
          typeNumIterator,
        })}
        rules={[
          {
            required: true,
            //message: t("general.validation.required"),
          },
        ]}
        name={["cieca_pft", `ty${typeNum}_sur${typeNumIterator}`]}
      >
        <InputNumber min={0} precision={2} disabled={jobRO} />
      </Form.Item>
    </>
  );
}