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";
import { ColorPicker } from "./shop-info.rostatus.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>
        <Form.Item
          name={["md_lost_sale_reasons"]}
          label={t("bodyshop.fields.md_lost_sale_reasons")}
          rules={[
            {
              // required: true,
              //message: t("general.validation.required"),
              type: "array",
            },
          ]}
        >
          <Select mode="tags" />
        </Form.Item>
      </LayoutFormRow>
      <Divider orientation="left">{t("bodyshop.labels.workingdays")}</Divider>
      <Space wrap size="large" id="workingdays">
        <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")} id="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")} id="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 direction="horizontal">
                        <Form.Item
                          label={
                            <Space>
                              {t("bodyshop.fields.ssbuckets.color")}
                              <Button
                                size="small"
                                onClick={() => {
                                  form.setFieldValue([
                                    "ssbuckets",
                                    field.name,
                                    "color",
                                  ]);

                                  form.setFields([
                                    {
                                      name: ["ssbuckets", field.name, "color"],
                                      touched: true,
                                    },
                                  ]);
                                }}
                              >
                                Reset
                              </Button>
                            </Space>
                          }
                          key={`${index}color`}
                          name={[field.name, "color"]}
                        >
                          <ColorPicker />
                        </Form.Item>
                        <Space wrap>
                          <DeleteFilled
                            onClick={() => {
                              remove(field.name);
                            }}
                          />
                          <FormListMoveArrows
                            move={move}
                            index={index}
                            total={fields.length}
                          />
                        </Space>
                      </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>
  );
}