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

import { DeleteFilled } from "@ant-design/icons";
import {
  Button,
  Divider,
  Form,
  Input,
  InputNumber,
  Select,
  Space,
  Switch,
  TimePicker,
} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import ColorpickerFormItemComponent from "../form-items-formatted/colorpicker-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";

export default function ShopInfoSchedulingComponent({ form }) {
  const { t } = useTranslation();

  return (
    <div>
      <LayoutFormRow>
        <Form.Item
          label={t("bodyshop.fields.appt_length")}
          name={"appt_length"}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <InputNumber min={15} precision={0} />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.schedule_start_time")}
          name={"schedule_start_time"}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <TimePicker showSecond={false} format="HH:mm" />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.schedule_end_time")}
          name={"schedule_end_time"}
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <TimePicker showSecond={false} format="HH:mm" />
        </Form.Item>
        <Form.Item
          name={["appt_alt_transport"]}
          label={t("bodyshop.fields.appt_alt_transport")}
          rules={[
            {
              //message: t("general.validation.required"),
              type: "array",
            },
          ]}
        >
          <Select mode="tags" />
        </Form.Item>
        <Form.Item
          name={["ss_configuration", "dailyhrslimit"]}
          label={t("bodyshop.fields.ss_configuration.dailyhrslimit")}
        >
          <InputNumber min={0} />
        </Form.Item>
      </LayoutFormRow>
      <Divider orientation="left">{t("bodyshop.labels.workingdays")}</Divider>
      <Space wrap size="large">
        <Form.Item
          label={t("general.labels.sunday")}
          name={["workingdays", "sunday"]}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          label={t("general.labels.monday")}
          name={["workingdays", "monday"]}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          label={t("general.labels.tuesday")}
          name={["workingdays", "tuesday"]}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          label={t("general.labels.wednesday")}
          name={["workingdays", "wednesday"]}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          label={t("general.labels.thursday")}
          name={["workingdays", "thursday"]}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          label={t("general.labels.friday")}
          name={["workingdays", "friday"]}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          label={t("general.labels.saturday")}
          name={["workingdays", "saturday"]}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
      </Space>
      <LayoutFormRow header={t("bodyshop.labels.apptcolors")}>
        <Form.List name={["appt_colors"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item
                        label={t("bodyshop.fields.appt_colors.label")}
                        key={`${index}aptcolorlabel`}
                        name={[field.name, "label"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("bodyshop.fields.appt_colors.color")}
                        key={`${index}aptcolorcolor`}
                        name={[field.name, "color"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <ColorpickerFormItemComponent />
                      </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("bodyshop.actions.addapptcolor")}
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </LayoutFormRow>
      <LayoutFormRow header={t("bodyshop.labels.ssbuckets")}>
        <Form.List name={["ssbuckets"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item
                        label={t("bodyshop.fields.ssbuckets.id")}
                        key={`${index}id`}
                        name={[field.name, "id"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("bodyshop.fields.ssbuckets.label")}
                        key={`${index}label`}
                        name={[field.name, "label"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <Input />
                      </Form.Item>

                      <Form.Item
                        label={t("bodyshop.fields.ssbuckets.gte")}
                        key={`${index}gte`}
                        name={[field.name, "gte"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <InputNumber />
                      </Form.Item>

                      <Form.Item
                        label={t("bodyshop.fields.ssbuckets.lt")}
                        key={`${index}lt`}
                        name={[field.name, "lt"]}
                      >
                        <InputNumber />
                      </Form.Item>

                      <Form.Item
                        label={t("bodyshop.fields.ssbuckets.target")}
                        key={`${index}target`}
                        name={[field.name, "target"]}
                        rules={[
                          {
                            required: true,
                            //message: t("general.validation.required"),
                          },
                        ]}
                      >
                        <InputNumber />
                      </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("bodyshop.actions.addbucket")}
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </LayoutFormRow>
    </div>
  );
}