import { DownOutlined } from "@ant-design/icons";
import { Dropdown, InputNumber, Menu, Space } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
export default function PartsOrderModalPriceChange({ form, field }) {
  const { t } = useTranslation();
  const menu = (
    <Menu
      onClick={({ key }) => {
        if (key === "custom") return;
        const values = form.getFieldsValue();

        const { parts_order_lines } = values;

        form.setFieldsValue({
          parts_order_lines: {
            data: parts_order_lines.data.map((p, idx) => {
              if (idx !== field.name) return p;
              return {
                ...p,
                act_price: (p.act_price || 0) * ((100 - key) / 100),
              };
            }),
          },
        });
      }}
      items={[
        {
          key: "5",
          label: t("parts_orders.labels.discount", { percent: "5%" }),
        },
        {
          key: "10",
          label: t("parts_orders.labels.discount", { percent: "10%" }),
        },
        {
          key: "15",
          label: t("parts_orders.labels.discount", { percent: "15%" }),
        },
        {
          key: "20",
          label: t("parts_orders.labels.discount", { percent: "20%" }),
        },
        {
          key: "25",
          label: t("parts_orders.labels.discount", { percent: "25%" }),
        },
        {
          key: "custom",
          label: (
            <InputNumber
              onClick={(e) => e.stopPropagation()}
              addonAfter="%"
              onKeyUp={(e) => {
                if (e.key === "Enter") {
                  const values = form.getFieldsValue();
                  const { parts_order_lines } = values;

                  form.setFieldsValue({
                    parts_order_lines: {
                      data: parts_order_lines.data.map((p, idx) => {
                        if (idx !== field.name) return p;
                        console.log(
                          p,
                          e.target.value,
                          (p.act_price || 0) *
                            ((100 - (e.target.value || 0)) / 100)
                        );
                        return {
                          ...p,
                          act_price:
                            (p.act_price || 0) *
                            ((100 - (e.target.value || 0)) / 100),
                        };
                      }),
                    },
                  });
                  e.target.value = 0;
                }
              }}
              min={0}
              max={100}
            />
          ),
        },
      ]}
    />
  );
  return (
    <Dropdown overlay={menu} trigger="click">
      <Space>
        %
        <DownOutlined />
      </Space>
    </Dropdown>
  );
}
