import { DeleteFilled } from "@ant-design/icons";
import {
  Button,
  Form,
  Input,
  InputNumber,
  Select,
  Switch,
  Typography,
} from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import DataLabel from "../data-label/data-label.component";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";

const SelectorDiv = styled.div`
  .ant-form-item .ant-select {
    width: 125px;
  }
`;

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ShopInfoResponsibilityCenterComponent);

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

  const [costOptions, setCostOptions] = useState(
    [
      ...((form.getFieldValue(["md_responsibility_centers", "costs"]) &&
        form
          .getFieldValue(["md_responsibility_centers", "costs"])
          .map((i) => i && i.name)) ||
        []),
    ] || []
  );

  const [profitOptions, setProfitOptions] = useState(
    [
      ...((form.getFieldValue(["md_responsibility_centers", "profits"]) &&
        form
          .getFieldValue(["md_responsibility_centers", "profits"])
          .map((i) => i && i.name)) ||
        []),
    ] || []
  );

  const handleBlur = () => {
    setCostOptions([
      ...(form
        .getFieldValue(["md_responsibility_centers", "costs"])
        .map((i) => i && i.name) || []),
    ]);
    setProfitOptions([
      ...(form
        .getFieldValue(["md_responsibility_centers", "profits"])
        .map((i) => i && i.name) || []),
    ]);
  };

  return (
    <div>
      {bodyshop.cdk_dealerid && (
        <>
          <DataLabel label={t("bodyshop.labels.dms.cdk_dealerid")}>
            {form.getFieldValue("cdk_dealerid")}
          </DataLabel>
          <LayoutFormRow>
            <Form.Item
              label={t("bodyshop.fields.dms.default_journal")}
              rules={[
                {
                  required: true,
                  //message: t("general.validation.required"),
                },
              ]}
              name={["cdk_configuration", "default_journal"]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label={t("bodyshop.fields.dms.srcco")}
              rules={[
                {
                  required: true,
                  //message: t("general.validation.required"),
                },
              ]}
              name={["cdk_configuration", "srcco"]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label={t("bodyshop.fields.dms.generic_customer_number")}
              name={["cdk_configuration", "generic_customer_number"]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label={t("bodyshop.fields.dms.cashierid")}
              rules={[
                {
                  required: true,
                  //message: t("general.validation.required"),
                },
              ]}
              name={["cdk_configuration", "cashierid"]}
            >
              <Input />
            </Form.Item>
          </LayoutFormRow>
          <LayoutFormRow header={t("bodyshop.labels.dms.cdk.payers")}>
            <Form.List name={["cdk_configuration", "payers"]}>
              {(fields, { add, remove }) => {
                return (
                  <div>
                    {fields.map((field, index) => (
                      <Form.Item key={field.key}>
                        <LayoutFormRow noDivider>
                          <Form.Item
                            label={t("jobs.fields.dms.payer.name")}
                            key={`${index}name`}
                            name={[field.name, "name"]}
                            rules={[
                              {
                                required: true,
                              },
                            ]}
                          >
                            <Input />
                          </Form.Item>
                          <Form.Item
                            label={t("jobs.fields.dms.payer.dms_acctnumber")}
                            key={`${index}dms_acctnumber`}
                            name={[field.name, "dms_acctnumber"]}
                            rules={[
                              {
                                required: true,
                              },
                            ]}
                          >
                            <Input />
                          </Form.Item>
                          <Form.Item
                            label={t("jobs.fields.dms.payer.control_type")}
                            key={`${index}control_type`}
                            name={[field.name, "control_type"]}
                            rules={[
                              {
                                required: true,
                              },
                            ]}
                          >
                            <Select>
                              <Select.Option value="ro_number">
                                {t("jobs.fields.ro_number")}
                              </Select.Option>
                              <Select.Option value="clm_no">
                                {t("jobs.fields.clm_no")}
                              </Select.Option>
                              <Select.Option value="po_number">
                                {t("jobs.fields.ponumber")}
                              </Select.Option>
                            </Select>
                          </Form.Item>

                          <DeleteFilled
                            onClick={() => {
                              remove(field.name);
                            }}
                          />
                        </LayoutFormRow>
                      </Form.Item>
                    ))}
                    <Form.Item>
                      <Button
                        type="dashed"
                        onClick={() => {
                          add();
                        }}
                        style={{ width: "100%" }}
                      >
                        {t("general.actions.add")}
                      </Button>
                    </Form.Item>
                  </div>
                );
              }}
            </Form.List>
          </LayoutFormRow>
        </>
      )}
      <LayoutFormRow header={t("bodyshop.labels.responsibilitycenters.costs")}>
        <Form.List name={["md_responsibility_centers", "costs"]}>
          {(fields, { add, remove }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item
                        label={t("bodyshop.fields.responsibilitycenter")}
                        key={`${index}name`}
                        name={[field.name, "name"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <Input onBlur={handleBlur} />
                      </Form.Item>
                      <Form.Item
                        label={t(
                          "bodyshop.fields.responsibilitycenter_accountname"
                        )}
                        key={`${index}accountname`}
                        name={[field.name, "accountname"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <Input onBlur={handleBlur} />
                      </Form.Item>
                      {/* <Form.Item
                        label={t(
                          "bodyshop.fields.responsibilitycenter_accountnumber"
                        )}
                        key={`${index}accountnumber`}
                        name={[field.name, "accountnumber"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <Input onBlur={handleBlur} />
                      </Form.Item> */}
                      <Form.Item
                        label={t(
                          "bodyshop.fields.responsibilitycenter_accountdesc"
                        )}
                        key={`${index}accountdesc`}
                        name={[field.name, "accountdesc"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <Input onBlur={handleBlur} />
                      </Form.Item>
                      {/* <Form.Item
                        label={t(
                          "bodyshop.fields.responsibilitycenter_accountitem"
                        )}
                        key={`${index}accountitem`}
                        name={[field.name, "accountitem"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <Input onBlur={handleBlur} />
                      </Form.Item> */}

                      {bodyshop.cdk_dealerid && (
                        <Form.Item
                          label={t("bodyshop.fields.dms.dms_acctnumber")}
                          key={`${index}dms_acctnumber`}
                          name={[field.name, "dms_acctnumber"]}
                          rules={[
                            {
                              required: true,
                            },
                          ]}
                        >
                          <Input onBlur={handleBlur} />
                        </Form.Item>
                      )}
                      {bodyshop.cdk_dealerid && (
                        <Form.Item
                          label={t("bodyshop.fields.dms.dms_wip_acctnumber")}
                          key={`${index}dms_wip_acctnumber`}
                          name={[field.name, "dms_wip_acctnumber"]}
                          rules={[
                            {
                              required: true,
                            },
                          ]}
                        >
                          <Input onBlur={handleBlur} />
                        </Form.Item>
                      )}

                      <DeleteFilled
                        onClick={() => {
                          remove(field.name);
                        }}
                      />
                    </LayoutFormRow>
                  </Form.Item>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    style={{ width: "100%" }}
                  >
                    {t("general.actions.add")}
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </LayoutFormRow>

      <LayoutFormRow
        header={t("bodyshop.labels.responsibilitycenters.profits")}
      >
        <Form.List name={["md_responsibility_centers", "profits"]}>
          {(fields, { add, remove }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item
                        label={t("bodyshop.fields.responsibilitycenter")}
                        key={`${index}name`}
                        name={[field.name, "name"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <Input onBlur={handleBlur} />
                      </Form.Item>
                      {/* <Form.Item
                        label={t(
                          "bodyshop.fields.responsibilitycenter_accountname"
                        )}
                        key={`${index}accountname`}
                        name={[field.name, "accountname"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <Input onBlur={handleBlur} />
                      </Form.Item>
                      <Form.Item
                        label={t(
                          "bodyshop.fields.responsibilitycenter_accountnumber"
                        )}
                        key={`${index}accountnumber`}
                        name={[field.name, "accountnumber"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <Input onBlur={handleBlur} />
                      </Form.Item> */}
                      <Form.Item
                        label={t(
                          "bodyshop.fields.responsibilitycenter_accountdesc"
                        )}
                        key={`${index}accountdesc`}
                        name={[field.name, "accountdesc"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <Input onBlur={handleBlur} />
                      </Form.Item>
                      <Form.Item
                        label={t(
                          "bodyshop.fields.responsibilitycenter_accountitem"
                        )}
                        key={`${index}accountitem`}
                        name={[field.name, "accountitem"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <Input onBlur={handleBlur} />
                      </Form.Item>
                      {bodyshop.cdk_dealerid && (
                        <Form.Item
                          label={t("bodyshop.fields.dms.dms_acctnumber")}
                          key={`${index}dms_acctnumber`}
                          name={[field.name, "dms_acctnumber"]}
                          rules={[
                            {
                              required: true,
                            },
                          ]}
                        >
                          <Input onBlur={handleBlur} />
                        </Form.Item>
                      )}
                      <DeleteFilled
                        onClick={() => {
                          remove(field.name);
                        }}
                      />
                    </LayoutFormRow>
                  </Form.Item>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    style={{ width: "100%" }}
                  >
                    {t("general.actions.add")}
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </LayoutFormRow>

      <SelectorDiv>
        {bodyshop.cdk_dealerid && (
          <>
            <Form.List name={["md_responsibility_centers", "dms_defaults"]}>
              {(fields, { add, remove }) => {
                return (
                  <div>
                    {fields.map((field, index) => (
                      <Form.Item key={field.key}>
                        <div>
                          <Form.Item
                            label={t("bodyshop.fields.dms.mappingname")}
                            key={`${index}name`}
                            name={[field.name, "name"]}
                            rules={[
                              {
                                required: true,
                                //message: t("general.validation.required"),
                              },
                            ]}
                          >
                            <Input />
                          </Form.Item>

                          <LayoutFormRow
                            header={t("bodyshop.labels.defaultcostsmapping")}
                          >
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.ats"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-ats`}
                              name={[field.name, "costs", "ATS"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lab"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-LAB`}
                              name={[field.name, "costs", "LAB"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lad"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-LAD`}
                              name={[field.name, "costs", "LAD"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lae"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-LAE`}
                              name={[field.name, "costs", "LAE"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.laf"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-LAF`}
                              name={[field.name, "costs", "LAF"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lag"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-LAG`}
                              name={[field.name, "costs", "LAG"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lam"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-LAM`}
                              name={[field.name, "costs", "LAM"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lar"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-LAR`}
                              name={[field.name, "costs", "LAR"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.las"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-LAS`}
                              name={[field.name, "costs", "LAS"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lau"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-LAU`}
                              name={[field.name, "costs", "LAU"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.paa"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-PAA`}
                              name={[field.name, "costs", "PAA"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pac"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-PAC`}
                              name={[field.name, "costs", "PAC"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pal"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-PAL`}
                              name={[field.name, "costs", "PAL"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pam"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-PAM`}
                              name={[field.name, "costs", "PAM"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pan"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-PAN`}
                              name={[field.name, "costs", "PAN"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pao"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-PAO`}
                              name={[field.name, "costs", "PAO"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pap"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-PAP`}
                              name={[field.name, "costs", "PAP"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.par"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-PAR`}
                              name={[field.name, "costs", "PAR"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pas"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-PAS`}
                              name={[field.name, "costs", "PAS"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.tow"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-TOW`}
                              name={[field.name, "costs", "TOW"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.mapa"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-MAPA`}
                              name={[field.name, "costs", "MAPA"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.mash"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}costs-MASH`}
                              name={[field.name, "costs", "MASH"]}
                            >
                              <Select>
                                {costOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                          </LayoutFormRow>
                          <LayoutFormRow
                            header={t("bodyshop.labels.defaultprofitsmapping")}
                          >
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.ats"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-ATS`}
                              name={[field.name, "profits", "ATS"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lab"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-LAB`}
                              name={[field.name, "profits", "LAB"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lad"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-LAD`}
                              name={[field.name, "profits", "LAD"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lae"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-LAE`}
                              name={[field.name, "profits", "LAE"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.laf"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-LAF`}
                              name={[field.name, "profits", "LAF"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lag"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-LAG`}
                              name={[field.name, "profits", "LAG"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lam"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-LAM`}
                              name={[field.name, "profits", "LAM"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lar"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-LAR`}
                              name={[field.name, "profits", "LAR"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.las"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-LAS`}
                              name={[field.name, "profits", "LAS"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.lau"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-LAU`}
                              name={[field.name, "profits", "LAU"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.paa"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-PAA`}
                              name={[field.name, "profits", "PAA"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pac"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-PAC`}
                              name={[field.name, "profits", "PAC"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pal"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-PAL`}
                              name={[field.name, "profits", "PAL"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pam"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-PAM`}
                              name={[field.name, "profits", "PAM"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pan"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-PAN`}
                              name={[field.name, "profits", "PAN"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pao"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-PAO`}
                              name={[field.name, "profits", "PAO"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pap"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-PAP`}
                              name={[field.name, "profits", "PAP"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.par"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-PAR`}
                              name={[field.name, "profits", "PAR"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.pas"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-PAS`}
                              name={[field.name, "profits", "PAS"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.tow"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-TOW`}
                              name={[field.name, "profits", "TOW"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.mapa"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-MAPA`}
                              name={[field.name, "profits", "MAPA"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <Form.Item
                              label={t(
                                "bodyshop.fields.responsibilitycenters.mash"
                              )}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                              key={`${index}profits-MASH`}
                              name={[field.name, "profits", "MASH"]}
                            >
                              <Select>
                                {profitOptions.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                          </LayoutFormRow>

                          <DeleteFilled
                            onClick={() => {
                              remove(field.name);
                            }}
                          />
                        </div>
                      </Form.Item>
                    ))}
                    <Form.Item>
                      <Button
                        type="dashed"
                        onClick={() => {
                          add();
                        }}
                        style={{ width: "100%" }}
                      >
                        {t("general.actions.add")}
                      </Button>
                    </Form.Item>
                  </div>
                );
              }}
            </Form.List>
          </>
        )}

        <LayoutFormRow header={t("bodyshop.labels.defaultcostsmapping")}>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.ats")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "ATS"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lab")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "LAB"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lad")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "LAD"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lae")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "LAE"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.laf")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "LAF"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lag")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "LAG"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lam")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "LAM"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lar")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "LAR"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.las")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "LAS"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lau")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "LAU"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.paa")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "PAA"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pac")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "PAC"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pal")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "PAL"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pam")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "PAM"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pan")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "PAN"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pao")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "PAO"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pap")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "PAP"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.par")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "PAR"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pas")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "PAS"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.tow")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "TOW"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.mapa")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "MAPA"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.mash")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "costs", "MASH"]}
          >
            <Select>
              {costOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        </LayoutFormRow>
        <LayoutFormRow header={t("bodyshop.labels.defaultprofitsmapping")}>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.ats")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "ATS"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lab")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "LAB"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lad")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "LAD"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lae")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "LAE"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.laf")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "LAF"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lag")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "LAG"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lam")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "LAM"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lar")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "LAR"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.las")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "LAS"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.lau")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "LAU"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.paa")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "PAA"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pac")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "PAC"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pal")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "PAL"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pam")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "PAM"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pan")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "PAN"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pao")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "PAO"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pap")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "PAP"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.par")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "PAR"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.pas")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "PAS"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.tow")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "TOW"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.mapa")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "MAPA"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenters.mash")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={["md_responsibility_centers", "defaults", "profits", "MASH"]}
          >
            <Select>
              {profitOptions.map((item, idx) => (
                <Select.Option key={idx} value={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        </LayoutFormRow>
      </SelectorDiv>

      <LayoutFormRow
        header={t("bodyshop.labels.responsibilitycenters.tax_accounts")}
      >
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenters.federal_tax")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "taxes", "federal", "name"]}
        >
          <Input />
        </Form.Item>
        {/* <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountnumber")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={[
            "md_responsibility_centers",
            "taxes",
            "federal",
            "accountnumber",
          ]}
        >
          <Input />
        </Form.Item> */}
        {/* <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountname")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={[
            "md_responsibility_centers",
            "taxes",
            "federal",
            "accountname",
          ]}
        >
          <Input />
        </Form.Item> */}
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={[
            "md_responsibility_centers",
            "taxes",
            "federal",
            "accountdesc",
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountitem")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={[
            "md_responsibility_centers",
            "taxes",
            "federal",
            "accountitem",
          ]}
        >
          <Input />
        </Form.Item>
        {bodyshop.cdk_dealerid && (
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenter_dms_acctnumber")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={[
              "md_responsibility_centers",
              "taxes",
              "federal",
              "dms_acctnumber",
            ]}
          >
            <Input />
          </Form.Item>
        )}
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_rate")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "taxes", "federal", "rate"]}
        >
          <InputNumber precision={2} />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenters.state_tax")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "taxes", "state", "name"]}
        >
          <Input />
        </Form.Item>
        {/* <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountnumber")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={[
            "md_responsibility_centers",
            "taxes",
            "state",
            "accountnumber",
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountname")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "taxes", "state", "accountname"]}
        >
          <Input />
        </Form.Item> */}
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "taxes", "state", "accountdesc"]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountitem")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "taxes", "state", "accountitem"]}
        >
          <Input />
        </Form.Item>
        {bodyshop.cdk_dealerid && (
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenter_dms_acctnumber")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={[
              "md_responsibility_centers",
              "taxes",
              "state",
              "dms_acctnumber",
            ]}
          >
            <Input />
          </Form.Item>
        )}
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_rate")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "taxes", "state", "rate"]}
        >
          <InputNumber precision={2} />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenters.local_tax")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "taxes", "local", "name"]}
        >
          <Input />
        </Form.Item>
        {/* <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountnumber")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={[
            "md_responsibility_centers",
            "taxes",
            "local",
            "accountnumber",
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountname")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "taxes", "local", "accountname"]}
        >
          <Input />
        </Form.Item> */}
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "taxes", "local", "accountdesc"]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountitem")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "taxes", "local", "accountitem"]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_rate")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "taxes", "local", "rate"]}
        >
          <InputNumber precision={2} />
        </Form.Item>
        {bodyshop.cdk_dealerid && (
          <Form.Item
            label={t("bodyshop.fields.responsibilitycenter_dms_acctnumber")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
            name={[
              "md_responsibility_centers",
              "taxes",
              "local",
              "dms_acctnumber",
            ]}
          >
            <Input />
          </Form.Item>
        )}
      </LayoutFormRow>
      <LayoutFormRow header={<div>AR</div>}>
        {/* <Form.Item
          label={t("bodyshop.fields.responsibilitycenters.ar")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "ar", "name"]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountnumber")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "ar", "accountnumber"]}
        >
          <Input />
        </Form.Item> */}
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountname")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "ar", "accountname"]}
        >
          <Input />
        </Form.Item>
        {/* <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "ar", "accountdesc"]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountitem")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "ar", "accountitem"]}
        >
          <Input />
        </Form.Item> */}
      </LayoutFormRow>
      {/* <LayoutFormRow>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenters.ap")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "ap", "name"]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountnumber")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "ap", "accountnumber"]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountname")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "ap", "accountname"]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "ap", "accountdesc"]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountitem")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "ap", "accountitem"]}
        >
          <Input />
        </Form.Item>
      </LayoutFormRow> */}
      <LayoutFormRow header={<div>Refund</div>}>
        {/* <Form.Item
          label={t("bodyshop.fields.responsibilitycenters.refund")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "refund", "name"]}
        >
          <Input />
        </Form.Item> */}
        {/* <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountnumber")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "refund", "accountnumber"]}
        >
          <Input />
        </Form.Item> */}
        {/* <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountname")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "refund", "accountname"]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "refund", "accountdesc"]}
        >
          <Input />
        </Form.Item> */}
        <Form.Item
          label={t("bodyshop.fields.responsibilitycenter_accountitem")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
          name={["md_responsibility_centers", "refund", "accountitem"]}
        >
          <Input />
        </Form.Item>
      </LayoutFormRow>
      <Typography.Title level={4}>
        {t("bodyshop.labels.responsibilitycenters.sales_tax_codes")}
      </Typography.Title>
      <Form.List name={["md_responsibility_centers", "sales_tax_codes"]}>
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map((field, index) => (
                <Form.Item key={field.key}>
                  <LayoutFormRow>
                    <Form.Item
                      label={t(
                        "bodyshop.fields.responsibilitycenters.sales_tax_codes.description"
                      )}
                      key={`${index}description`}
                      name={[field.name, "description"]}
                      rules={[
                        {
                          required: true,
                          //message: t("general.validation.required"),
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>
                    <Form.Item
                      label={t(
                        "bodyshop.fields.responsibilitycenters.sales_tax_codes.code"
                      )}
                      key={`${index}code`}
                      name={[field.name, "code"]}
                      rules={[
                        {
                          required: true,
                          //message: t("general.validation.required"),
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>
                    <Form.Item
                      label={t(
                        "bodyshop.fields.responsibilitycenters.sales_tax_codes.federal"
                      )}
                      key={`${index}federal`}
                      name={[field.name, "federal"]}
                      valuePropName="checked"
                    >
                      <Switch />
                    </Form.Item>
                    <Form.Item
                      label={t(
                        "bodyshop.fields.responsibilitycenters.sales_tax_codes.state"
                      )}
                      key={`${index}state`}
                      name={[field.name, "state"]}
                      valuePropName="checked"
                    >
                      <Switch />
                    </Form.Item>
                    <Form.Item
                      label={t(
                        "bodyshop.fields.responsibilitycenters.sales_tax_codes.local"
                      )}
                      key={`${index}local`}
                      name={[field.name, "local"]}
                      valuePropName="checked"
                    >
                      <Switch />
                    </Form.Item>
                    <DeleteFilled
                      onClick={() => {
                        remove(field.name);
                      }}
                    />
                  </LayoutFormRow>
                </Form.Item>
              ))}
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  style={{ width: "100%" }}
                >
                  {t("bodyshop.actions.newsalestaxcode")}
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>
    </div>
  );
}