import { DeleteFilled } from "@ant-design/icons";
import {
  Button,
  Col,
  Form,
  Input,
  InputNumber,
  Row,
  Select,
  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>
      <Form.Item
        label={t("bodyshop.fields.schedule_start_time")}
        name={"schedule_start_time"}
        rules={[
          {
            required: true,
            message: t("general.validation.required"),
          },
        ]}
      >
        <TimePicker showSecond={false} />
      </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} />
      </Form.Item>
      <strong>{t("bodyshop.labels.orderstatuses")}</strong>
      <Row>
        <Col span={24}>
          <Form.List name={["appt_colors"]}>
            {(fields, { add, remove, move }) => {
              return (
                <div>
                  {fields.map((field, index) => (
                    <Form.Item
                      key={field.key}
                      style={{ padding: 0, margin: 2 }}
                    >
                      <LayoutFormRow>
                        <Form.Item
                          className="imex-flex-row__margin"
                          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
                          className="imex-flex-row__margin"
                          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>
                        <DeleteFilled
                          className="imex-flex-row__margin"
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                        <FormListMoveArrows
                          move={move}
                          index={index}
                          total={fields.length}
                        />
                      </LayoutFormRow>
                    </Form.Item>
                  ))}
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                      style={{ width: "100%" }}
                    >
                      {t("bodyshop.actions.addpartslocation")}
                    </Button>
                  </Form.Item>
                </div>
              );
            }}
          </Form.List>
          <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.List name={["ssbuckets"]}>
            {(fields, { add, remove, move }) => {
              return (
                <div>
                  {fields.map((field, index) => (
                    <Form.Item
                      key={field.key}
                      style={{ padding: 0, margin: 2 }}
                    >
                      <LayoutFormRow>
                        <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>
                        <div>
                          <DeleteFilled
                            onClick={() => {
                              remove(field.name);
                            }}
                          />
                          <FormListMoveArrows
                            move={move}
                            index={index}
                            total={fields.length}
                          />
                        </div>
                      </LayoutFormRow>
                    </Form.Item>
                  ))}
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                      style={{ width: "100%" }}
                    >
                      {t("bodyshop.actions.addbucket")}
                    </Button>
                  </Form.Item>
                </div>
              );
            }}
          </Form.List>
        </Col>
      </Row>
    </div>
  );
}