import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Input, 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 PartsOrderCommentsComponent() {
  const { t } = useTranslation();
  const form = Form.useFormInstance();
  const orderComments = Form.useWatch(["md_parts_order_comment"], form) || [];

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

                  return (
                    <Form.Item key={field.key}>
                      <LayoutFormRow
                        noDivider
                        title={getFormListItemTitle(
                          t("parts_orders.fields.comments"),
                          index,
                          comment.label,
                          comment.comment
                        )}
                        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"]}
                          rules={[
                            {
                              required: true
                            }
                          ]}
                        >
                          <Input />
                        </Form.Item>
                        <Form.Item
                          label={t("parts_orders.fields.comments")}
                          key={`${index}comment`}
                          name={[field.name, "comment"]}
                          rules={[
                            {
                              required: true
                            }
                          ]}
                        >
                          <Input.TextArea autoSize />
                        </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>
  );
}
