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 ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
import InlineValidatedFormRow from "../layout-form-row/inline-validated-form-row.component.jsx";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import {
  INLINE_TITLE_GROUP_STYLE,
  INLINE_TITLE_HANDLE_STYLE,
  INLINE_TITLE_INPUT_STYLE,
  INLINE_TITLE_LABEL_STYLE,
  INLINE_TITLE_ROW_STYLE,
  INLINE_TITLE_SEPARATOR_STYLE,
  InlineTitleListIcon
} from "../layout-form-row/inline-form-row-title.utils.js";
import InstanceRenderManager from "../../utils/instanceRenderMgr";

export default function ShopInfoSpeedPrint() {
  const { t } = useTranslation();
  const form = Form.useFormInstance();
  const allTemplates = TemplateList("job");
  const TemplateListGenerated = InstanceRenderManager({
    imex: Object.fromEntries(Object.entries(allTemplates).filter(([, { enhanced_payroll }]) => !enhanced_payroll)),
    rome: allTemplates
  });

  return (
    <Form.List name={["speedprint"]}>
      {(fields, { add, remove, move }) => {
        return (
          <LayoutFormRow
            header={t("bodyshop.labels.speedprint_configurations")}
            actions={[
              <Button
                key="add-speedprint"
                type="primary"
                block
                onClick={() => {
                  add();
                }}
              >
                {t("bodyshop.actions.addspeedprint")}
              </Button>
            ]}
          >
            <div>
              {fields.length === 0 ? (
                <ConfigListEmptyState actionLabel={t("bodyshop.actions.addspeedprint")} />
              ) : (
                fields.map((field, index) => {
                  return (
                    <Form.Item noStyle key={field.key}>
                      <InlineValidatedFormRow
                        form={form}
                        errorNames={[
                          ["speedprint", field.name, "id"],
                          ["speedprint", field.name, "label"]
                        ]}
                        noDivider
                        title={
                          <div style={INLINE_TITLE_ROW_STYLE}>
                            <InlineTitleListIcon style={INLINE_TITLE_HANDLE_STYLE} />
                            <div style={INLINE_TITLE_GROUP_STYLE}>
                              <div style={INLINE_TITLE_LABEL_STYLE}>{t("bodyshop.fields.speedprint.id")}</div>
                              <Form.Item
                                noStyle
                                name={[field.name, "id"]}
                                rules={[
                                  {
                                    required: true
                                    //message: t("general.validation.required"),
                                  }
                                ]}
                              >
                                <Input
                                  size="small"
                                  placeholder={t("bodyshop.fields.speedprint.id")}
                                  style={{
                                    ...INLINE_TITLE_INPUT_STYLE,
                                    width: "100%"
                                  }}
                                />
                              </Form.Item>
                            </div>
                            <div aria-hidden style={INLINE_TITLE_SEPARATOR_STYLE} />
                            <div style={INLINE_TITLE_GROUP_STYLE}>
                              <div style={INLINE_TITLE_LABEL_STYLE}>{t("bodyshop.fields.speedprint.label")}</div>
                              <Form.Item
                                noStyle
                                name={[field.name, "label"]}
                                rules={[
                                  {
                                    required: true
                                    //message: t("general.validation.required"),
                                  }
                                ]}
                              >
                                <Input
                                  size="small"
                                  placeholder={t("bodyshop.fields.speedprint.label")}
                                  style={{
                                    ...INLINE_TITLE_INPUT_STYLE,
                                    width: "100%"
                                  }}
                                />
                              </Form.Item>
                            </div>
                          </div>
                        }
                        wrapTitle
                        extra={
                          <Space align="center" size="small">
                            <Button
                              type="text"
                              danger
                              icon={<DeleteFilled />}
                              onClick={() => {
                                remove(field.name);
                              }}
                            />
                            <FormListMoveArrows
                              move={move}
                              index={index}
                              total={fields.length}
                              orientation="horizontal"
                            />
                          </Space>
                        }
                      >
                        <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"
                            options={Object.keys(TemplateListGenerated).map((key) => ({
                              value: TemplateListGenerated[key].key,
                              label: TemplateListGenerated[key].title
                            }))}
                          />
                        </Form.Item>
                      </InlineValidatedFormRow>
                    </Form.Item>
                  );
                })
              )}
            </div>
          </LayoutFormRow>
        );
      }}
    </Form.List>
  );
}
