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 PartsLocationsComponent() {
  const { t } = useTranslation();
  const form = Form.useFormInstance();
  const partsLocations = Form.useWatch(["md_parts_locations"], form) || [];

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

                  return (
                    <Form.Item key={field.key}>
                      <LayoutFormRow
                        noDivider
                        title={getFormListItemTitle(t("bodyshop.fields.partslocation"), index, location)}
                        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
                          className="imex-flex-row__margin"
                          label={t("bodyshop.fields.partslocation")}
                          key={`${index}`}
                          name={[field.name]}
                          rules={[
                            {
                              required: true
                            }
                          ]}
                        >
                          <Input />
                        </Form.Item>
                      </LayoutFormRow>
                    </Form.Item>
                  );
                })}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    style={{ width: "100%" }}
                  >
                    {t("bodyshop.actions.addpartslocation")}
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </LayoutFormRow>
    </div>
  );
}
