import { DownOutlined } from "@ant-design/icons";
import { Dropdown, InputNumber, Space } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";

export default function PartsOrderModalPriceChange({ form, field }) {
  const { t } = useTranslation();
  const menu = {
    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}
          />
        )
      }
    ],
    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)
            };
          })
        }
      });
    }
  };

  return (
    <Dropdown menu={menu} trigger="click">
      <Space>
        %
        <DownOutlined />
      </Space>
    </Dropdown>
  );
}