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 { 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 = () => ({
  //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?.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>
      <LayoutFormRow header={t("bodyshop.labels.accountingsetup")} id="accountingsetup">
        {[
          ...(HasFeatureAccess({ featureName: "export", bodyshop })
            ? [
                <Form.Item
                  key="qbo"
                  label={t("bodyshop.labels.qbo")}
                  valuePropName="checked"
                  name={["accountingconfig", "qbo"]}
                >
                  <Switch />
                </Form.Item>,
                InstanceRenderManager({
                  imex: (
                    <Form.Item key="qbo_usa_wrapper" 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
                  key="qbo_departmentid"
                  label={t("bodyshop.labels.qbo_departmentid")}
                  name={["accountingconfig", "qbo_departmentid"]}
                >
                  <Input />
                </Form.Item>,
                <Form.Item
                  key="accountingtiers"
                  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 key="twotierpref_wrapper" 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
                  key="printlater"
                  label={t("bodyshop.labels.printlater")}
                  valuePropName="checked"
                  name={["accountingconfig", "printlater"]}
                >
                  <Switch />
                </Form.Item>,
                <Form.Item
                  key="emaillater"
                  label={t("bodyshop.labels.emaillater")}
                  valuePropName="checked"
                  name={["accountingconfig", "emaillater"]}
                >
                  <Switch />
                </Form.Item>
              ]
            : []),
          <Form.Item
            key="inhousevendorid"
            label={t("bodyshop.fields.inhousevendorid")}
            name={"inhousevendorid"}
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
          >
            <Input />
          </Form.Item>,
          <Form.Item
            key="default_adjustment_rate"
            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 key="federal_tax_id" label={t("bodyshop.fields.federal_tax_id")} name="federal_tax_id">
                <Input />
              </Form.Item>
            )
          }),
          <Form.Item key="state_tax_id" label={t("bodyshop.fields.state_tax_id")} name="state_tax_id">
            <Input />
          </Form.Item>,
          ...(HasFeatureAccess({ featureName: "bills", bodyshop })
            ? [
                InstanceRenderManager({
                  imex: (
                    <Form.Item
                      key="invoice_federal_tax_rate"
                      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
                  key="invoice_state_tax_rate"
                  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
                  key="invoice_local_tax_rate"
                  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
            key="md_payment_types"
            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
            key="md_categories"
            name={["md_categories"]}
            label={t("bodyshop.fields.md_categories")}
            rules={[
              {
                //message: t("general.validation.required"),
                type: "array"
              }
            ]}
          >
            <Select mode="tags" />
          </Form.Item>,
          ...(HasFeatureAccess({ featureName: "export", bodyshop })
            ? [
                <Form.Item
                  key="ReceivableCustomField1"
                  name={["accountingconfig", "ReceivableCustomField1"]}
                  label={t("bodyshop.fields.ReceivableCustomField", { number: 1 })}
                >
                  {ReceivableCustomFieldSelect}
                </Form.Item>,
                <Form.Item
                  key="ReceivableCustomField2"
                  name={["accountingconfig", "ReceivableCustomField2"]}
                  label={t("bodyshop.fields.ReceivableCustomField", { number: 2 })}
                >
                  {ReceivableCustomFieldSelect}
                </Form.Item>,
                <Form.Item
                  key="ReceivableCustomField3"
                  name={["accountingconfig", "ReceivableCustomField3"]}
                  label={t("bodyshop.fields.ReceivableCustomField", { number: 3 })}
                >
                  {ReceivableCustomFieldSelect}
                </Form.Item>,
                <Form.Item
                  key="md_classes"
                  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>,
                <Form.Item
                  key="enforce_class"
                  name={["enforce_class"]}
                  label={t("bodyshop.fields.enforce_class")}
                  valuePropName="checked"
                >
                  <Switch />
                </Form.Item>,
                ...(ClosingPeriod.treatment === "on"
                  ? [
                      <Form.Item
                        key="ClosingPeriod"
                        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
                        key="companyCode"
                        name={["accountingconfig", "companyCode"]}
                        label={t("bodyshop.fields.companycode")}
                      >
                        <Input />
                      </Form.Item>
                    ]
                  : []),
                ...(ADPPayroll.treatment === "on"
                  ? [
                      <Form.Item
                        key="batchID"
                        name={["accountingconfig", "batchID"]}
                        label={t("bodyshop.fields.batchid")}
                      >
                        <Input />
                      </Form.Item>
                    ]
                  : [])
              ]
            : []),
          <Form.Item
            key="accumulatePayableLines"
            name={["accountingconfig", "accumulatePayableLines"]}
            label={t("bodyshop.fields.accumulatePayableLines")}
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
        ]}
      </LayoutFormRow>
      <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
            key="md_referral_sources"
            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
            key="enforce_referral"
            name={["enforce_referral"]}
            label={t("bodyshop.fields.enforce_referral")}
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>,
          <Form.Item
            key="enforce_conversion_csr"
            name={["enforce_conversion_csr"]}
            label={t("bodyshop.fields.enforce_conversion_csr")}
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>,
          <Form.Item
            key="enforce_conversion_category"
            name={["enforce_conversion_category"]}
            label={t("bodyshop.fields.enforce_conversion_category")}
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>,
          <Form.Item
            key="target_touchtime"
            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
            key="use_fippa"
            label={t("bodyshop.fields.use_fippa")}
            name={["use_fippa"]}
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>,
          <Form.Item
            key="md_hour_split_prep"
            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
            key="md_hour_split_paint"
            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
            key="jc_hourly_rates_mapa"
            label={t("bodyshop.fields.jc_hourly_rates.mapa")}
            name={["jc_hourly_rates", "mapa"]}
          >
            <CurrencyInput />
          </Form.Item>,
          <Form.Item
            key="jc_hourly_rates_mash"
            label={t("bodyshop.fields.jc_hourly_rates.mash")}
            name={["jc_hourly_rates", "mash"]}
          >
            <CurrencyInput />
          </Form.Item>,
          <Form.Item
            key="use_paint_scale_data"
            name={["use_paint_scale_data"]}
            label={t("bodyshop.fields.use_paint_scale_data")}
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>,
          <Form.Item
            key="attach_pdf_to_email"
            name={["attach_pdf_to_email"]}
            label={t("bodyshop.fields.attach_pdf_to_email")}
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>,
          <Form.Item
            key="md_from_emails"
            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
            key="md_email_cc_parts_order"
            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
            key="md_email_cc_parts_return_slip"
            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
                  key="tt_allow_post_to_invoiced"
                  name={["tt_allow_post_to_invoiced"]}
                  label={t("bodyshop.fields.tt_allow_post_to_invoiced")}
                  valuePropName="checked"
                >
                  <Switch />
                </Form.Item>,
                <Form.Item
                  key="tt_enforce_hours_for_tech_console"
                  name={["tt_enforce_hours_for_tech_console"]}
                  label={t("bodyshop.fields.tt_enforce_hours_for_tech_console")}
                  valuePropName="checked"
                >
                  <Switch />
                </Form.Item>,
                <Form.Item
                  key="bill_allow_post_to_closed"
                  name={["bill_allow_post_to_closed"]}
                  label={t("bodyshop.fields.bill_allow_post_to_closed")}
                  valuePropName="checked"
                >
                  <Switch />
                </Form.Item>
              ]
            : []),
          <Form.Item
            key="md_ded_notes"
            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
            key="parts_queue_toggle"
            label={t("bodyshop.fields.md_functionality_toggles.parts_queue_toggle")}
            name={["md_functionality_toggles", "parts_queue_toggle"]}
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>,
          <Form.Item
            key="last_name_first"
            name={["last_name_first"]}
            label={t("bodyshop.fields.last_name_first")}
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>,
          <Form.Item
            key="uselocalmediaserver"
            name={["uselocalmediaserver"]}
            label={t("bodyshop.fields.uselocalmediaserver")}
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>,
          <Form.Item
            key="localmediaserverhttp"
            name={["localmediaserverhttp"]}
            label={t("bodyshop.fields.localmediaserverhttp")}
          >
            <Input />
          </Form.Item>,
          <Form.Item
            key="localmediaservernetwork"
            name={["localmediaservernetwork"]}
            label={t("bodyshop.fields.localmediaservernetwork")}
          >
            <Input />
          </Form.Item>,
          <Form.Item key="localmediatoken" 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={<span id="insurancecos-header">{t("bodyshop.labels.insurancecos")}</span>}
        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%" }}
                    id="insurancecos-add-button"
                  >
                    {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"]}
                          rules={[
                            {
                              required: true
                              //message: t("general.validation.required"),
                            }
                          ]}
                        >
                          <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"]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <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"]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("bodyshop.labels.md_to_emails_emails")}
                        key={`${index}emails`}
                        name={[field.name, "emails"]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <FormItemEmail email={form.getFieldValue([field.name, "emails"])} />
                      </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>
);