import { Form, Input, Modal } from "antd";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import InputCurrency from "../form-items-formatted/currency-form-item.component";

export default function JobLinesUpsertModalComponent({
  visible,
  jobLine,
  handleCancel,
  handleFinish
}) {
  const { t } = useTranslation();
  const [form] = Form.useForm();

  useEffect(() => {
    form.resetFields();
  }, [visible, form]);

  return (
    <Form
      onFinish={handleFinish}
      initialValues={jobLine}
      autoComplete="off"
      form={form}
    >
      <Modal
        title={
          jobLine && jobLine.id
            ? t("joblines.labels.edit")
            : t("joblines.labels.new")
        }
        visible={visible}
        okText={t("general.labels.save")}
        onOk={() => form.submit()}
        onCancel={handleCancel}
      >
        <Form.Item
          label={t("joblines.fields.line_desc")}
          rules={[
            {
              required: true,
              message: t("general.validation.required")
            }
          ]}
          name="line_desc"
        >
          <Input />
        </Form.Item>
        <Form.Item label={t("joblines.fields.oem_partno")} name="oem_partno">
          <Input />
        </Form.Item>
        <Form.Item label={t("joblines.fields.part_type")} name="part_type">
          <Input />
        </Form.Item>
        <Form.Item label={t("joblines.fields.mod_lbr_ty")} name="mod_lbr_ty">
          <Input />
        </Form.Item>
        <Form.Item
          label={t("joblines.fields.op_code_desc")}
          name="op_code_desc"
        >
          <Input />
        </Form.Item>
        <Form.Item label={t("joblines.fields.mod_lb_hrs")} name="mod_lb_hrs">
          <InputCurrency />
        </Form.Item>
        <Form.Item label={t("joblines.fields.act_price")} name="act_price">
          <InputCurrency />
        </Form.Item>
      </Modal>
    </Form>
  );
}
