import { DeleteFilled } from "@ant-design/icons";
import { useSplitTreatments } from "@splitsoftware/splitio-react";
import { Button, DatePicker, Form, Input, InputNumber, Radio, Select, Space, Switch } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import DatePickerRanges from "../../utils/DatePickerRanges";
import InstanceRenderManager from "../../utils/instanceRenderMgr";
import FeatureWrapper, { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";
import FormItemEmail from "../form-items-formatted/email-form-item.component";
import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";

const timeZonesList = Intl.supportedValuesOf("timeZone");
const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoGeneral);

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

  const {
    treatments: { ClosingPeriod, ADPPayroll }
  } = useSplitTreatments({
    attributes: {},
    names: ["ClosingPeriod", "ADPPayroll"],
    splitKey: bodyshop && bodyshop.imexshopid
  });

  return (
    <div>
      <LayoutFormRow header={t("bodyshop.labels.businessinformation")} id="businessinformation">
        <Form.Item
          label={t("bodyshop.fields.shopname")}
          name="shopname"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.address1")}
          name="address1"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.address2")} name="address2">
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.city")}
          name="city"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.state")}
          name="state"
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.zip_post")} name="zip_post">
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.country")} name="country">
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.email")} name="email">
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.phone")}
          name="phone"
          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "phone")]}
        >
          <PhoneFormItem />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.website")} name="website">
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.timezone")}
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
          name="timezone"
        >
          <Select
            showSearch
            options={timeZonesList.map((z) => {
              return { label: z, value: z };
            })}
          />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.insurance_vendor_id")} name="insurance_vendor_id">
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.logo_img_path")} name={["logo_img_path", "src"]}>
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.logo_img_path_height")} name={["logo_img_path", "height"]}>
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.logo_img_path_width")} name={["logo_img_path", "width"]}>
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.logo_img_header_margin")} name={["logo_img_path", "headerMargin"]}>
          <InputNumber min={0} />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.logo_img_footer_margin")} name={["logo_img_path", "footerMargin"]}>
          <InputNumber min={0} />
        </Form.Item>
      </LayoutFormRow>
      <FeatureWrapper featureName="export" noauth={() => null}>
        <LayoutFormRow header={t("bodyshop.labels.accountingsetup")} id="accountingsetup">
          <Form.Item label={t("bodyshop.labels.qbo")} valuePropName="checked" name={["accountingconfig", "qbo"]}>
            <Switch />
          </Form.Item>
          {InstanceRenderManager({
            imex: (
              <Form.Item shouldUpdate noStyle>
                {() => (
                  <Form.Item
                    label={t("bodyshop.labels.qbo_usa")}
                    shouldUpdate
                    valuePropName="checked"
                    name={["accountingconfig", "qbo_usa"]}
                  >
                    <Switch disabled={!form.getFieldValue(["accountingconfig", "qbo"])} />
                  </Form.Item>
                )}
              </Form.Item>
            )
          })}
          <Form.Item label={t("bodyshop.labels.qbo_departmentid")} name={["accountingconfig", "qbo_departmentid"]}>
            <Input />
          </Form.Item>
          <Form.Item
            label={t("bodyshop.labels.accountingtiers")}
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
            name={["accountingconfig", "tiers"]}
          >
            <Radio.Group>
              <Radio value={2}>2</Radio>
              <Radio value={3}>3</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item shouldUpdate>
            {() => {
              return (
                <Form.Item
                  label={t("bodyshop.labels.2tiersetup")}
                  shouldUpdate
                  rules={[
                    {
                      required: form.getFieldValue(["accountingconfig", "tiers"]) === 2
                      //message: t("general.validation.required"),
                    }
                  ]}
                  name={["accountingconfig", "twotierpref"]}
                >
                  <Radio.Group disabled={form.getFieldValue(["accountingconfig", "tiers"]) === 3}>
                    <Radio value="name">{t("bodyshop.labels.2tiername")}</Radio>
                    <Radio value="source">{t("bodyshop.labels.2tiersource")}</Radio>
                  </Radio.Group>
                </Form.Item>
              );
            }}
          </Form.Item>
          <Form.Item
            label={t("bodyshop.labels.printlater")}
            valuePropName="checked"
            name={["accountingconfig", "printlater"]}
          >
            <Switch />
          </Form.Item>
          <Form.Item
            label={t("bodyshop.labels.emaillater")}
            valuePropName="checked"
            name={["accountingconfig", "emaillater"]}
          >
            <Switch />
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.inhousevendorid")}
            name={"inhousevendorid"}
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.default_adjustment_rate")}
            name={"default_adjustment_rate"}
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
          >
            <InputNumber min={0} precision={2} />
          </Form.Item>
          {InstanceRenderManager({
            imex: (
              <Form.Item label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
                <Input />
              </Form.Item>
            )
          })}
          <Form.Item label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
            <Input />
          </Form.Item>
          {InstanceRenderManager({
            imex: (
              <Form.Item
                label={t("bodyshop.fields.invoice_federal_tax_rate")}
                name={["bill_tax_rates", "federal_tax_rate"]}
                rules={[
                  {
                    required: true
                    //message: t("general.validation.required"),
                  }
                ]}
              >
                <InputNumber />
              </Form.Item>
            )
          })}
          <Form.Item
            label={t("bodyshop.fields.invoice_state_tax_rate")}
            name={["bill_tax_rates", "state_tax_rate"]}
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
          >
            <InputNumber />
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.invoice_local_tax_rate")}
            name={["bill_tax_rates", "local_tax_rate"]}
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
          >
            <InputNumber />
          </Form.Item>
          <Form.Item
            name={["md_payment_types"]}
            label={t("bodyshop.fields.md_payment_types")}
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
                type: "array"
              }
            ]}
          >
            <Select mode="tags" />
          </Form.Item>
          <Form.Item
            name={["md_categories"]}
            label={t("bodyshop.fields.md_categories")}
            rules={[
              {
                //message: t("general.validation.required"),
                type: "array"
              }
            ]}
          >
            <Select mode="tags" />
          </Form.Item>
          <Form.Item name={["enforce_class"]} label={t("bodyshop.fields.enforce_class")} valuePropName="checked">
            <Switch />
          </Form.Item>
          <Form.Item
            name={["accountingconfig", "ReceivableCustomField1"]}
            label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
          >
            {ReceivableCustomFieldSelect}
          </Form.Item>
          <Form.Item
            name={["accountingconfig", "ReceivableCustomField2"]}
            label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
          >
            {ReceivableCustomFieldSelect}
          </Form.Item>
          <Form.Item
            name={["accountingconfig", "ReceivableCustomField3"]}
            label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
          >
            {ReceivableCustomFieldSelect}
          </Form.Item>
          <Form.Item
            name={["md_classes"]}
            label={t("bodyshop.fields.md_classes")}
            rules={[
              ({ getFieldValue }) => {
                return {
                  required: getFieldValue("enforce_class"),
                  //message: t("general.validation.required"),
                  type: "array"
                };
              }
            ]}
          >
            <Select mode="tags" />
          </Form.Item>
          {ClosingPeriod.treatment === "on" && (
            <Form.Item
              name={["accountingconfig", "ClosingPeriod"]}
              label={t("bodyshop.fields.closingperiod")} //{t("reportcenter.labels.dates")}
            >
              <DatePicker.RangePicker format="MM/DD/YYYY" presets={DatePickerRanges} />
            </Form.Item>
          )}
          {ADPPayroll.treatment === "on" && (
            <Form.Item name={["accountingconfig", "companyCode"]} label={t("bodyshop.fields.companycode")}>
              <Input />
            </Form.Item>
          )}
          {ADPPayroll.treatment === "on" && (
            <Form.Item name={["accountingconfig", "batchID"]} label={t("bodyshop.fields.batchid")}>
              <Input />
            </Form.Item>
          )}
        </LayoutFormRow>
      </FeatureWrapper>
      <FeatureWrapper featureName="scoreboard" noauth={() => null}>
        <LayoutFormRow header={t("bodyshop.labels.scoreboardsetup")} id="scoreboardsetup">
          <Form.Item
            label={t("bodyshop.fields.dailypainttarget")}
            name={["scoreboard_target", "dailyPaintTarget"]}
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
          >
            <InputNumber min={0} precision={0} />
          </Form.Item>

          <Form.Item
            label={t("bodyshop.fields.dailybodytarget")}
            name={["scoreboard_target", "dailyBodyTarget"]}
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
          >
            <InputNumber min={0} precision={0} />
          </Form.Item>

          <Form.Item
            label={t("bodyshop.fields.lastnumberworkingdays")}
            name={["scoreboard_target", "lastNumberWorkingDays"]}
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
          >
            <InputNumber min={0} max={12} precision={0} />
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.ignoreblockeddays")}
            name={["scoreboard_target", "ignoreblockeddays"]}
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
          <Form.Item
            label={t("bodyshop.fields.prodtargethrs")}
            name={["prodtargethrs"]}
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
          >
            <InputNumber min={1} precision={1} />
          </Form.Item>
        </LayoutFormRow>
      </FeatureWrapper>
      <LayoutFormRow header={t("bodyshop.labels.systemsettings")} id="systemsettings">
        <Form.Item
          name={["md_referral_sources"]}
          label={t("bodyshop.fields.md_referral_sources")}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
              type: "array"
            }
          ]}
        >
          <Select mode="tags" />
        </Form.Item>
        <Form.Item name={["enforce_referral"]} label={t("bodyshop.fields.enforce_referral")} valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item
          name={["enforce_conversion_csr"]}
          label={t("bodyshop.fields.enforce_conversion_csr")}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          name={["enforce_conversion_category"]}
          label={t("bodyshop.fields.enforce_conversion_category")}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          name={["target_touchtime"]}
          label={t("bodyshop.fields.target_touchtime")}
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <InputNumber min={0.1} precision={1} />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.use_fippa")} name={["use_fippa"]} valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.md_hour_split.prep")}
          name={["md_hour_split", "prep"]}
          dependencies={[["md_hour_split", "paint"]]}
          rules={[
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (!value && !getFieldValue(["md_hour_split", "paint"])) {
                  return Promise.resolve();
                }
                if (value + getFieldValue(["md_hour_split", "paint"]) === 1) {
                  return Promise.resolve();
                }
                return Promise.reject(t("bodyshop.validation.larsplit"));
              }
            })
          ]}
        >
          <InputNumber min={0} max={1} precision={2} />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.md_hour_split.paint")}
          name={["md_hour_split", "paint"]}
          dependencies={[["md_hour_split", "prep"]]}
          rules={[
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (!value && !getFieldValue(["md_hour_split", "paint"])) {
                  return Promise.resolve();
                }
                if (value + getFieldValue(["md_hour_split", "prep"]) === 1) {
                  return Promise.resolve();
                }
                return Promise.reject(t("bodyshop.validation.larsplit"));
              }
            })
          ]}
        >
          <InputNumber min={0} max={1} precision={2} />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.jc_hourly_rates.mapa")} name={["jc_hourly_rates", "mapa"]}>
          <CurrencyInput />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.jc_hourly_rates.mash")} name={["jc_hourly_rates", "mash"]}>
          <CurrencyInput />
        </Form.Item>
        <Form.Item
          name={["use_paint_scale_data"]}
          label={t("bodyshop.fields.use_paint_scale_data")}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          name={["attach_pdf_to_email"]}
          label={t("bodyshop.fields.attach_pdf_to_email")}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          name={["md_from_emails"]}
          label={t("bodyshop.fields.md_from_emails")}
          // rules={[
          //   {
          //     //message: t("general.validation.required"),
          //     type: "array",
          //   },
          // ]}
        >
          <Select mode="tags" />
        </Form.Item>
        <Form.Item
          name={["md_email_cc", "parts_order"]}
          label={t("bodyshop.fields.md_email_cc", { template: "parts_orders" })}
          rules={[
            {
              //message: t("general.validation.required"),
              type: "array"
            }
          ]}
        >
          <Select mode="tags" />
        </Form.Item>
        <Form.Item
          name={["md_email_cc", "parts_return_slip"]}
          label={t("bodyshop.fields.md_email_cc", { template: "parts_returns" })}
          rules={[
            {
              //message: t("general.validation.required"),
              type: "array"
            }
          ]}
        >
          <Select mode="tags" />
        </Form.Item>

        {HasFeatureAccess({ featureName: "timetickets", bodyshop }) && (
          <>
            <Form.Item
              name={["tt_allow_post_to_invoiced"]}
              label={t("bodyshop.fields.tt_allow_post_to_invoiced")}
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>
            <Form.Item
              name={["tt_enforce_hours_for_tech_console"]}
              label={t("bodyshop.fields.tt_enforce_hours_for_tech_console")}
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>
            <Form.Item
              name={["bill_allow_post_to_closed"]}
              label={t("bodyshop.fields.bill_allow_post_to_closed")}
              valuePropName="checked"
            >
              <Switch />
            </Form.Item>
          </>
        )}
        <Form.Item
          name={["md_ded_notes"]}
          label={t("bodyshop.fields.md_ded_notes")}
          rules={[
            {
              //message: t("general.validation.required"),
              type: "array"
            }
          ]}
        >
          <Select mode="tags" />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.md_functionality_toggles.parts_queue_toggle")}
          name={["md_functionality_toggles", "parts_queue_toggle"]}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item name={["last_name_first"]} label={t("bodyshop.fields.last_name_first")} valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item
          name={["uselocalmediaserver"]}
          label={t("bodyshop.fields.uselocalmediaserver")}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item name={["localmediaserverhttp"]} label={t("bodyshop.fields.localmediaserverhttp")}>
          <Input />
        </Form.Item>
        <Form.Item name={["localmediaservernetwork"]} label={t("bodyshop.fields.localmediaservernetwork")}>
          <Input />
        </Form.Item>
        <Form.Item name={["localmediatoken"]} label={t("bodyshop.fields.localmediatoken")}>
          <Input />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow header={t("bodyshop.labels.shop_enabled_features")} id="sharing">
        <Form.Item
          label={t("general.actions.sharetoteams")}
          valuePropName="checked"
          name={["md_functionality_toggles", "teams"]}
        >
          <Switch />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow grow header={t("bodyshop.labels.messagingpresets")} id="messagingpresets">
        <Form.List name={["md_messaging_presets"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item
                        label={t("bodyshop.fields.messaginglabel")}
                        key={`${index}label`}
                        name={[field.name, "label"]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("bodyshop.fields.messagingtext")}
                        key={`${index}text`}
                        name={[field.name, "text"]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <Input.TextArea autoSize />
                      </Form.Item>
                      <Space wrap>
                        <DeleteFilled
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                        <FormListMoveArrows move={move} index={index} total={fields.length} />
                      </Space>
                    </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 grow header={t("bodyshop.labels.notespresets")} id="notespresets">
        <Form.List name={["md_notes_presets"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item
                        label={t("bodyshop.fields.noteslabel")}
                        key={`${index}label`}
                        name={[field.name, "label"]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("bodyshop.fields.notestext")}
                        key={`${index}text`}
                        name={[field.name, "text"]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <Input.TextArea autoSize />
                      </Form.Item>
                      <Space wrap>
                        <DeleteFilled
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                        <FormListMoveArrows move={move} index={index} total={fields.length} />
                      </Space>
                    </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 grow header={t("bodyshop.labels.partslocations")} id="partslocations">
        <Form.List name={["md_parts_locations"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item
                        className="imex-flex-row__margin"
                        label={t("bodyshop.fields.partslocation")}
                        key={`${index}`}
                        name={[field.name]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <Input />
                      </Form.Item>
                      <Space wrap>
                        <DeleteFilled
                          className="imex-flex-row__margin"
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                        <FormListMoveArrows move={move} index={index} total={fields.length} />
                      </Space>
                    </LayoutFormRow>
                  </Form.Item>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    style={{ width: "100%" }}
                  >
                    {t("bodyshop.actions.addpartslocation")}
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </LayoutFormRow>
      <LayoutFormRow grow header={t("bodyshop.labels.insurancecos")} id="insurancecos">
        <Form.List name={["md_ins_cos"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item
                        label={t("bodyshop.fields.md_ins_co.name")}
                        key={`${index}name`}
                        name={[field.name, "name"]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("bodyshop.fields.md_ins_co.street1")}
                        key={`${index}street1`}
                        name={[field.name, "street1"]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("bodyshop.fields.md_ins_co.street2")}
                        key={`${index}street2`}
                        name={[field.name, "street2"]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("bodyshop.fields.md_ins_co.city")}
                        key={`${index}city`}
                        name={[field.name, "city"]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("bodyshop.fields.md_ins_co.state")}
                        key={`${index}state`}
                        name={[field.name, "state"]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("bodyshop.fields.md_ins_co.zip")}
                        key={`${index}zip`}
                        name={[field.name, "zip"]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("bodyshop.fields.md_ins_co.private")}
                        key={`${index}private`}
                        name={[field.name, "private"]}
                        valuePropName="checked"
                      >
                        <Switch />
                      </Form.Item>

                      <Space wrap>
                        <DeleteFilled
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                        <FormListMoveArrows move={move} index={index} total={fields.length} />
                      </Space>
                    </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 grow header={t("bodyshop.labels.estimators")} id="estimators">
        <Form.List name={["md_estimators"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item
                        label={t("jobs.fields.est_co_nm")}
                        key={`${index}est_co_nm`}
                        name={[field.name, "est_co_nm"]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("jobs.fields.est_ct_fn")}
                        key={`${index}est_ct_fn`}
                        name={[field.name, "est_ct_fn"]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("jobs.fields.est_ct_ln")}
                        key={`${index}est_ct_ln`}
                        name={[field.name, "est_ct_ln"]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("jobs.fields.est_ph1")}
                        key={`${index}est_ph1`}
                        name={[field.name, "est_ph1"]}
                        rules={[
                          ({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, [field.name, "est_ph"])
                        ]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("jobs.fields.est_ea")}
                        key={`${index}est_ea`}
                        name={[field.name, "est_ea"]}
                        rules={[
                          {
                            type: "email",
                            message: "This is not a valid email address."
                          }
                        ]}
                      >
                        <FormItemEmail email={form.getFieldValue([field.name, "est_ea"])} />
                      </Form.Item>
                      <Space>
                        <DeleteFilled
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                        <FormListMoveArrows move={move} index={index} total={fields.length} />
                      </Space>
                    </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 grow header={t("bodyshop.labels.filehandlers")} id="filehandlers">
        <Form.List name={["md_filehandlers"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item
                        label={t("jobs.fields.ins_ct_fn")}
                        key={`${index}ins_ct_fn`}
                        name={[field.name, "ins_ct_fn"]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("jobs.fields.ins_ct_ln")}
                        key={`${index}ins_ct_ln`}
                        name={[field.name, "ins_ct_ln"]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("jobs.fields.ins_ph1")}
                        key={`${index}ins_ph1`}
                        name={[field.name, "ins_ph1"]}
                        rules={[
                          ({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, [field.name, "ins_ph"])
                        ]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("jobs.fields.ins_ea")}
                        key={`${index}ins_ea`}
                        name={[field.name, "ins_ea"]}
                        rules={[
                          {
                            type: "email",
                            message: "This is not a valid email address."
                          }
                        ]}
                      >
                        <FormItemEmail email={form.getFieldValue([field.name, "ins_ea"])} />
                      </Form.Item>
                      <Space>
                        <DeleteFilled
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                        <FormListMoveArrows move={move} index={index} total={fields.length} />
                      </Space>
                    </LayoutFormRow>
                  </Form.Item>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    style={{ width: "100%" }}
                  >
                    {t("general.actions.add")}
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </LayoutFormRow>
      <FeatureWrapper featureName="courtesycars" noauth={() => null}>
        <LayoutFormRow grow header={t("bodyshop.fields.md_ccc_rates")} id="md_ccc_rates">
          <Form.List name={["md_ccc_rates"]}>
            {(fields, { add, remove, move }) => {
              return (
                <div>
                  {fields.map((field, index) => (
                    <Form.Item key={field.key}>
                      <LayoutFormRow noDivider>
                        <Form.Item label={t("general.labels.label")} key={`${index}label`} name={[field.name, "label"]}>
                          <Input />
                        </Form.Item>
                        <Form.Item
                          label={t("contracts.fields.actax")}
                          key={`${index}actax`}
                          name={[field.name, "actax"]}
                        >
                          <InputNumber precision={2} />
                        </Form.Item>
                        <Form.Item
                          label={t("contracts.fields.dailyfreekm")}
                          key={`${index}dailyfreekm`}
                          name={[field.name, "dailyfreekm"]}
                        >
                          <InputNumber precision={2} />
                        </Form.Item>
                        <Form.Item
                          label={t("contracts.fields.refuelcharge")}
                          key={`${index}refuelcharge`}
                          name={[field.name, "refuelcharge"]}
                        >
                          <InputNumber precision={2} />
                        </Form.Item>
                        <Form.Item
                          label={t("contracts.fields.excesskmrate")}
                          key={`${index}excesskmrate`}
                          name={[field.name, "excesskmrate"]}
                        >
                          <InputNumber precision={2} />
                        </Form.Item>
                        <Form.Item
                          label={t("contracts.fields.cleanupcharge")}
                          key={`${index}cleanupcharge`}
                          name={[field.name, "cleanupcharge"]}
                        >
                          <InputNumber precision={2} />
                        </Form.Item>
                        <Form.Item
                          label={t("contracts.fields.damagewaiver")}
                          key={`${index}damagewaiver`}
                          name={[field.name, "damagewaiver"]}
                        >
                          <InputNumber precision={2} />
                        </Form.Item>
                        <Form.Item
                          label={t("contracts.fields.federaltax")}
                          key={`${index}federaltax`}
                          name={[field.name, "federaltax"]}
                        >
                          <InputNumber precision={2} />
                        </Form.Item>
                        <Form.Item
                          label={t("contracts.fields.statetax")}
                          key={`${index}statetax`}
                          name={[field.name, "statetax"]}
                        >
                          <InputNumber precision={2} />
                        </Form.Item>
                        <Form.Item
                          label={t("contracts.fields.localtax")}
                          key={`${index}localtax`}
                          name={[field.name, "localtax"]}
                        >
                          <InputNumber precision={2} />
                        </Form.Item>
                        <Form.Item
                          label={t("contracts.fields.coverage")}
                          key={`${index}coverage`}
                          name={[field.name, "coverage"]}
                        >
                          <InputNumber precision={2} />
                        </Form.Item>

                        <Space wrap>
                          <DeleteFilled
                            onClick={() => {
                              remove(field.name);
                            }}
                          />
                          <FormListMoveArrows move={move} index={index} total={fields.length} />
                        </Space>
                      </LayoutFormRow>
                    </Form.Item>
                  ))}
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                      style={{ width: "100%" }}
                    >
                      {t("general.actions.add")}
                    </Button>
                  </Form.Item>
                </div>
              );
            }}
          </Form.List>
        </LayoutFormRow>
      </FeatureWrapper>

      <LayoutFormRow grow header={t("bodyshop.fields.md_jobline_presets")} id="md_jobline_presets">
        <Form.List name={["md_jobline_presets"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item label={t("general.labels.label")} key={`${index}label`} name={[field.name, "label"]}>
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("joblines.fields.line_desc")}
                        key={`${index}line_desc`}
                        name={[field.name, "line_desc"]}
                      >
                        <Input.TextArea autoSize />
                      </Form.Item>
                      <Form.Item
                        label={t("joblines.fields.mod_lbr_ty")}
                        key={`${index}mod_lbr_ty`}
                        name={[field.name, "mod_lbr_ty"]}
                      >
                        <Select allowClear>
                          <Select.Option value="LAA">{t("joblines.fields.lbr_types.LAA")}</Select.Option>
                          <Select.Option value="LAB">{t("joblines.fields.lbr_types.LAB")}</Select.Option>
                          <Select.Option value="LAD">{t("joblines.fields.lbr_types.LAD")}</Select.Option>
                          <Select.Option value="LAE">{t("joblines.fields.lbr_types.LAE")}</Select.Option>
                          <Select.Option value="LAF">{t("joblines.fields.lbr_types.LAF")}</Select.Option>
                          <Select.Option value="LAG">{t("joblines.fields.lbr_types.LAG")}</Select.Option>
                          <Select.Option value="LAM">{t("joblines.fields.lbr_types.LAM")}</Select.Option>
                          <Select.Option value="LAR">{t("joblines.fields.lbr_types.LAR")}</Select.Option>
                          <Select.Option value="LAS">{t("joblines.fields.lbr_types.LAS")}</Select.Option>
                          <Select.Option value="LAU">{t("joblines.fields.lbr_types.LAU")}</Select.Option>
                          <Select.Option value="LA1">{t("joblines.fields.lbr_types.LA1")}</Select.Option>
                          <Select.Option value="LA2">{t("joblines.fields.lbr_types.LA2")}</Select.Option>
                          <Select.Option value="LA3">{t("joblines.fields.lbr_types.LA3")}</Select.Option>
                          <Select.Option value="LA4">{t("joblines.fields.lbr_types.LA4")}</Select.Option>
                        </Select>
                      </Form.Item>
                      <Form.Item
                        label={t("joblines.fields.mod_lb_hrs")}
                        key={`${index}mod_lb_hrs`}
                        name={[field.name, "mod_lb_hrs"]}
                      >
                        <InputNumber precision={1} />
                      </Form.Item>
                      <Form.Item
                        label={t("joblines.fields.part_type")}
                        key={`${index}part_type`}
                        name={[field.name, "part_type"]}
                      >
                        <Select allowClear>
                          <Select.Option value="PAA">{t("joblines.fields.part_types.PAA")}</Select.Option>
                          <Select.Option value="PAC">{t("joblines.fields.part_types.PAC")}</Select.Option>
                          <Select.Option value="PAE">{t("joblines.fields.part_types.PAE")}</Select.Option>
                          <Select.Option value="PAL">{t("joblines.fields.part_types.PAL")}</Select.Option>
                          <Select.Option value="PAM">{t("joblines.fields.part_types.PAM")}</Select.Option>
                          <Select.Option value="PAN">{t("joblines.fields.part_types.PAN")}</Select.Option>
                          <Select.Option value="PAO">{t("joblines.fields.part_types.PAO")}</Select.Option>
                          <Select.Option value="PAR">{t("joblines.fields.part_types.PAR")}</Select.Option>
                          <Select.Option value="PAS">{t("joblines.fields.part_types.PAS")}</Select.Option>
                        </Select>
                      </Form.Item>
                      <Form.Item
                        label={t("joblines.fields.oem_partno")}
                        key={`${index}oem_partno`}
                        name={[field.name, "oem_partno"]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("joblines.fields.part_qty")}
                        key={`${index}part_qty`}
                        name={[field.name, "part_qty"]}
                      >
                        <CurrencyInput precision={2} min={0} />
                      </Form.Item>
                      <Form.Item
                        label={t("joblines.fields.act_price")}
                        key={`${index}act_price`}
                        name={[field.name, "act_price"]}
                      >
                        <CurrencyInput precision={2} min={0} />
                      </Form.Item>
                      <Form.Item
                        label={t("joblines.fields.prt_dsmk_p")}
                        key={`${index}prt_dsmk_p`}
                        name={[field.name, "prt_dsmk_p"]}
                      >
                        <InputNumber precision={0} min={-100} max={100} />
                      </Form.Item>
                      <Form.Item
                        label={t("joblines.fields.ah_detail_line")}
                        key={`${index}ah_detail_line`}
                        name={[field.name, "ah_detail_line"]}
                        valuePropName="checked"
                      >
                        <Switch />
                      </Form.Item>
                      <Space wrap>
                        <DeleteFilled
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                        <FormListMoveArrows move={move} index={index} total={fields.length} />
                      </Space>
                    </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 grow header={t("bodyshop.fields.md_parts_order_comment")} id="md_parts_order_comment">
        <Form.List name={["md_parts_order_comment"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item
                        label={t("general.labels.label")}
                        key={`${index}label`}
                        name={[field.name, "label"]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("parts_orders.fields.comments")}
                        key={`${index}comment`}
                        name={[field.name, "comment"]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <Input.TextArea autoSize />
                      </Form.Item>

                      <Space wrap>
                        <DeleteFilled
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                        <FormListMoveArrows move={move} index={index} total={fields.length} />
                      </Space>
                    </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 grow header={t("bodyshop.labels.md_to_emails")} id="md_to_emails">
        <Form.List name={["md_to_emails"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item label={t("general.labels.label")} key={`${index}label`} name={[field.name, "label"]}>
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("bodyshop.labels.md_to_emails_emails")}
                        key={`${index}emails`}
                        name={[field.name, "emails"]}
                      >
                        <Select mode="tags" tokenSeparators={[",", ";"]} />
                      </Form.Item>

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

const ReceivableCustomFieldSelect = (
  <Select allowClear>
    <Select.Option value="v_vin">VIN</Select.Option>
    <Select.Option value="clm_no">Claim No.</Select.Option>
    <Select.Option value="ded_amt">Deductible Amount</Select.Option>
  </Select>
);