import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Input, Select, Space } from "antd";
import { useTranslation } from "react-i18next";
import { TemplateList } from "../../utils/TemplateConstants";
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 ShopInfoSpeedPrint() {
  const { t } = useTranslation();
  const TemplateListGenerated = TemplateList("job");
  return (
    <Form.List name={["speedprint"]}>
      {(fields, { add, remove, move }) => {
        return (
          <div>
            {fields.map((field, index) => (
              <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
                <LayoutFormRow grow>
                  <Form.Item
                    label={t("bodyshop.fields.speedprint.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.speedprint.label")}
                    key={`${index}label`}
                    name={[field.name, "label"]}
                    rules={[
                      {
                        required: true
                        //message: t("general.validation.required"),
                      }
                    ]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    name={[field.name, "templates"]}
                    label={t("bodyshop.fields.speedprint.templates")}
                    rules={[
                      {
                        required: true,
                        //message: t("general.validation.required"),
                        type: "array"
                      }
                    ]}
                  >
                    <Select mode="multiple">
                      {Object.keys(TemplateListGenerated).map((key, idx) => (
                        <Select.Option key={idx} value={TemplateListGenerated[key].key}>
                          {TemplateListGenerated[key].title}
                        </Select.Option>
                      ))}
                    </Select>
                  </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.addspeedprint")}
              </Button>
            </Form.Item>
          </div>
        );
      }}
    </Form.List>
  );
}
