import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Input, Select, Space } from "antd";
import { useTranslation } from "react-i18next";
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";

export default function PartsEmailPresetsComponent() {
  const { t } = useTranslation();
  const form = Form.useFormInstance();
  const emailPresets = Form.useWatch(["md_to_emails"], form) || [];

  return (
    <div>
      <LayoutFormRow grow header={t("bodyshop.labels.md_to_emails")} id="md_to_emails">
        <Form.List name={["md_to_emails"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => {
                  const preset = emailPresets[field.name] || {};

                  return (
                    <Form.Item key={field.key}>
                      <LayoutFormRow
                        noDivider
                        title={getFormListItemTitle(t("general.labels.label"), index, preset.label, preset.emails)}
                        extra={
                          <Space align="center" size="small">
                            <Button
                              type="text"
                              icon={<DeleteFilled />}
                              onClick={() => {
                                remove(field.name);
                              }}
                            />
                            <FormListMoveArrows
                              move={move}
                              index={index}
                              total={fields.length}
                              orientation="horizontal"
                            />
                          </Space>
                        }
                      >
                        <Form.Item label={t("general.labels.label")} key={`${index}label`} name={[field.name, "label"]}>
                          <Input />
                        </Form.Item>
                        <Form.Item
                          label={t("bodyshop.labels.md_to_emails_emails")}
                          key={`${index}emails`}
                          name={[field.name, "emails"]}
                        >
                          <Select mode="tags" tokenSeparators={[",", ";"]} />
                        </Form.Item>
                      </LayoutFormRow>
                    </Form.Item>
                  );
                })}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    style={{ width: "100%" }}
                  >
                    {t("general.actions.add")}
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </LayoutFormRow>
    </div>
  );
}
