bodyshop/client/src/components/shop-info/shop-info.rostatus.component.jsx

import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Input, Select, Row, Col } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";

const SelectorDiv = styled.div`
  .ant-form-item .ant-select {
    width: 200px;
  }
`;
//TODO Fix up styles.
export default function ShopInfoROStatusComponent({ form }) {
  const { t } = useTranslation();

  const [options, setOptions] = useState(
    form.getFieldValue(["md_ro_statuses", "statuses"]) || []
  );

  const handleBlur = () => {
    setOptions(form.getFieldValue(["md_ro_statuses", "statuses"]));
  };

  return (
    <div>
      <Row>
        <Col span={8}>
          {t("bodyshop.labels.alljobstatuses")}
          <Form.List name={["md_ro_statuses", "statuses"]}>
            {(fields, { add, remove }) => {
              return (
                <div>
                  {fields.map((field, index) => (
                    <Form.Item
                      key={field.key}
                      style={{ padding: 0, margin: 2 }}>
                      <div style={{ display: "flex" }}>
                        <Form.Item
                          style={{ padding: 0, margin: 2 }}
                          label={t("bodyshop.fields.status")}
                          key={`${index}`}
                          name={[field.name]}
                          rules={[
                            {
                              required: true,
                              message: t("general.validation.required"),
                            },
                          ]}>
                          <Input onBlur={handleBlur} />
                        </Form.Item>
                        <DeleteFilled
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                      </div>
                    </Form.Item>
                  ))}
                  <Form.Item>
                    <Button
                      type='dashed'
                      onClick={() => {
                        add();
                      }}
                      style={{ width: "100%" }}>
                      {t("bodyshop.actions.newstatus")}
                    </Button>
                  </Form.Item>
                </div>
              );
            }}
          </Form.List>
        </Col>
        <Col span={12}>
          <SelectorDiv>
            <Form.Item
              name={["md_ro_statuses", "open_statuses"]}
              label={t("bodyshop.fields.statuses.open_statuses")}
              rules={[
                {
                  required: true,
                  message: t("general.validation.required"),
                  type: "array",
                },
              ]}>
              <Select mode='multiple'>
                {options.map((item, idx) => (
                  <Select.Option key={idx} value={item}>
                    {item}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              name={["md_ro_statuses", "production_statuses"]}
              label={t("bodyshop.fields.statuses.production_statuses")}
              rules={[
                {
                  required: true,
                  message: t("general.validation.required"),
                  type: "array",
                },
              ]}>
              <Select mode='multiple'>
                {options.map((item, idx) => (
                  <Select.Option key={idx} value={item}>
                    {item}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              label={t("bodyshop.fields.statuses.default_scheduled")}
              rules={[
                {
                  required: true,
                  message: t("general.validation.required"),
                },
              ]}
              name={["md_ro_statuses", "default_scheduled"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              label={t("bodyshop.fields.statuses.default_arrived")}
              rules={[
                {
                  required: true,
                  message: t("general.validation.required"),
                },
              ]}
              name={["md_ro_statuses", "default_arrived"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              label={t("bodyshop.fields.statuses.default_exported")}
              rules={[
                {
                  required: true,
                  message: t("general.validation.required"),
                },
              ]}
              name={["md_ro_statuses", "default_exported"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              label={t("bodyshop.fields.statuses.default_imported")}
              rules={[
                {
                  required: true,
                  message: t("general.validation.required"),
                },
              ]}
              name={["md_ro_statuses", "default_imported"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              label={t("bodyshop.fields.statuses.default_invoiced")}
              rules={[
                {
                  required: true,
                  message: t("general.validation.required"),
                },
              ]}
              name={["md_ro_statuses", "default_invoiced"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              label={t("bodyshop.fields.statuses.default_completed")}
              rules={[
                {
                  required: true,
                  message: t("general.validation.required"),
                },
              ]}
              name={["md_ro_statuses", "default_completed"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              label={t("bodyshop.fields.statuses.default_delivered")}
              rules={[
                {
                  required: true,
                  message: t("general.validation.required"),
                },
              ]}
              name={["md_ro_statuses", "default_delivered"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item
              label={t("bodyshop.fields.statuses.default_void")}
              rules={[
                {
                  required: true,
                  message: t("general.validation.required"),
                },
              ]}
              name={["md_ro_statuses", "default_void"]}>
              <Select>
                {options.map((item, idx) => (
                  <Select.Option key={idx}>{item}</Select.Option>
                ))}
              </Select>
            </Form.Item>
          </SelectorDiv>
        </Col>
      </Row>
    </div>
  );
}