import { Collapse, Divider, Form, Input, InputNumber, Space } from "antd";
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 }) {
  const { t } = useTranslation();
  const formItems = [];
  for (let tyCounter = 1; tyCounter <= 5; tyCounter++) {
    const section = [];

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

    for (let iterator = 1; iterator <= 5; iterator++) {
      section.push(
        TaxFormItems({
          typeNum: tyCounter,
          typeNumIterator: iterator,
          rootElements: false,
          jobRO,
          key: `nonroot${iterator}`
        })
      );
    }
    formItems.push(
      <>
        <Space key={`section${tyCounter}`} wrap>
          {section}
        </Space>
        <Divider />
      </>
    );
  }
  return (
    <Collapse
      defaultActiveKey={expanded && "rates"}
      items={[
        {
          key: "cieca_pft",
          label: t("jobs.labels.cieca_pft"),
          forceRender: true,
          children: formItems
        }
      ]}
    />
  );
}

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

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

  if (rootElements)
    return (
      <Form.Item
        key={key}
        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
        })}
        key={key + "tax_tier"}
        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
        })}
        key={key + "tax_thres"}
        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
        })}
        key={key + "tax_rate"}
        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
        })}
        key={key + "tax_sur"}
        rules={[
          {
            required: true
            //message: t("general.validation.required"),
          }
        ]}
        name={["cieca_pft", `ty${typeNum}_sur${typeNumIterator}`]}
      >
        <InputNumber min={0} precision={2} disabled={jobRO} />
      </Form.Item>
    </>
  );
}
