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

import { DeleteFilled } from "@ant-design/icons";
import { useTreatments } from "@splitsoftware/splitio-react";
import { Button, Form, Select, Space } from "antd";
import React, { useState } from "react";
import { ChromePicker } from "react-color";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";

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

export default function ShopInfoROStatusComponent({ form }) {
  const { t } = useTranslation();
  const { Production_List_Status_Colors } = useTreatments([
    "Production_List_Status_Colors",
  ]);

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

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

  return (
    <SelectorDiv>
      <Form.Item
        name={["md_ro_statuses", "statuses"]}
        label={t("bodyshop.labels.alljobstatuses")}
        rules={[
          {
            required: true,
            //message: t("general.validation.required"),
            type: "array",
          },
        ]}
      >
        <Select mode="tags" onBlur={handleBlur} />
      </Form.Item>
      <Form.Item
        name={["md_ro_statuses", "active_statuses"]}
        label={t("bodyshop.fields.statuses.active_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", "pre_production_statuses"]}
        label={t("bodyshop.fields.statuses.pre_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
        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
        name={["md_ro_statuses", "post_production_statuses"]}
        label={t("bodyshop.fields.statuses.post_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>
      <LayoutFormRow noDivider>
        <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} value={item}>
                {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} value={item}>
                {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} value={item}>
                {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} value={item}>
                {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} value={item}>
                {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} value={item}>
                {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} value={item}>
                {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} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
      </LayoutFormRow>
      {Production_List_Status_Colors.treatment === "on" && (
        <LayoutFormRow
          grow
          header={t("bodyshop.fields.statuses.production_colors")}
        >
          <Form.List name={["md_ro_statuses", "production_colors"]}>
            {(fields, { add, remove, move }) => {
              return (
                <div>
                  <LayoutFormRow>
                    {fields.map((field, index) => (
                      <Form.Item key={field.key}>
                        <Space direction="vertical">
                          <div style={{ display: "flex" }}>
                            <Form.Item
                              style={{ flex: 1 }}
                              label={t("jobs.fields.status")}
                              key={`${index}status`}
                              name={[field.name, "status"]}
                              rules={[
                                {
                                  required: true,
                                  //message: t("general.validation.required"),
                                },
                              ]}
                            >
                              <Select>
                                {options.map((item, idx) => (
                                  <Select.Option key={idx} value={item}>
                                    {item}
                                  </Select.Option>
                                ))}
                              </Select>
                            </Form.Item>
                            <DeleteFilled
                              onClick={() => {
                                remove(field.name);
                              }}
                            />
                          </div>
                          <Form.Item
                            label={t("bodyshop.fields.statuses.color")}
                            key={`${index}color`}
                            name={[field.name, "color"]}
                            rules={[
                              {
                                required: true,
                                //message: t("general.validation.required"),
                              },
                            ]}
                          >
                            <ColorPicker />
                          </Form.Item>
                        </Space>
                      </Form.Item>
                    ))}
                  </LayoutFormRow>
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                      style={{ width: "100%" }}
                    >
                      {t("general.actions.add")}
                    </Button>
                  </Form.Item>
                </div>
              );
            }}
          </Form.List>
        </LayoutFormRow>
      )}
    </SelectorDiv>
  );
}

const ColorPicker = ({ value, onChange, style, ...restProps }) => {
  const handleChange = (color) => {
    if (onChange) onChange(color.rgb);
  };
  return (
    <ChromePicker
      {...restProps}
      color={value}
      onChangeComplete={handleChange}
    />
  );
};