import React, { useState } from "react";
import { Button, Popover, Input, InputNumber, Form } from "antd";
import { SelectOutlined } from "@ant-design/icons";
import { useTranslation } from "react-i18next";

export default function InvoiceAddLineButton({ jobLine, discount, disabled }) {
  const [visibility, setVisibility] = useState(false);
  const { t } = useTranslation();

  const popContent = (
    <div style={{ display: "flex" }}>
      <Form.Item name="line_desc" label={t("joblines.fields.line_desc")}>
        <Input />
      </Form.Item>
      <Form.Item name="oem_partno" label={t("joblines.fields.oem_partno")}>
        <Input />
      </Form.Item>
      <Form.Item name="retail" label={t("invoicelines.fields.retail")}>
        <InputNumber precision={2} />
      </Form.Item>
      <Form.Item name="actual" label={t("invoicelines.fields.actual")}>
        <InputNumber precision={2} />
      </Form.Item>
      DISC: {discount}
      <Button onClick={() => setVisibility(false)}>X</Button>
    </div>
  );

  return (
    <Popover content={popContent} visible={visibility}>
      <Button onClick={() => setVisibility(true)} disabled={!disabled}>
        <SelectOutlined />
      </Button>
    </Popover>
  );
}
