import { Checkbox, Form, Skeleton, Typography } from "antd";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
import "./bill-cm-returns-table.styles.scss";

export default function BillCmdReturnsTableComponent({ form, returnLoading, returnData }) {
  const { t } = useTranslation();

  useEffect(() => {
    if (returnData) {
      form.setFieldsValue({
        outstanding_returns: returnData.parts_order_lines
      });
    }
  }, [returnData, form]);

  return (
    <Form.Item
      shouldUpdate={(prev, cur) =>
        prev.jobid !== cur.jobid || prev.is_credit_memo !== cur.is_credit_memo || prev.vendorid !== cur.vendorid
      }
      noStyle
    >
      {() => {
        const isReturn = form.getFieldValue("is_credit_memo");

        if (!isReturn) {
          return null;
        }

        if (returnLoading) return <Skeleton />;

        return (
          <Form.List name="outstanding_returns">
            {(fields) => {
              return (
                <>
                  <Typography.Title level={4}>{t("bills.labels.creditsnotreceived")}</Typography.Title>
                  <table className="bill-cm-returns-table">
                    <thead>
                      <tr>
                        <th>{t("parts_orders.fields.line_desc")}</th>
                        <th>{t("parts_orders.fields.part_type")}</th>
                        <th>{t("parts_orders.fields.quantity")}</th>
                        <th>{t("parts_orders.fields.act_price")}</th>
                        <th>{t("parts_orders.fields.cost")}</th>
                        <th>{t("parts_orders.labels.mark_as_received")}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {fields.map((field, index) => (
                        <tr key={field.key}>
                          <td>
                            <Form.Item hidden key={`${index}id`} name={[field.name, "id"]}>
                              <ReadOnlyFormItemComponent />
                            </Form.Item>
                            <Form.Item
                              //   label={t("joblines.fields.line_desc")}
                              key={`${index}line_desc`}
                              name={[field.name, "line_desc"]}
                            >
                              <ReadOnlyFormItemComponent />
                            </Form.Item>
                          </td>

                          <td>
                            <Form.Item
                              span={2}
                              //label={t("joblines.fields.mod_lb_hrs")}
                              key={`${index}part_type`}
                              name={[field.name, "part_type"]}
                            >
                              <ReadOnlyFormItemComponent />
                            </Form.Item>
                          </td>
                          <td>
                            <Form.Item
                              span={2}
                              //label={t("joblines.fields.mod_lb_hrs")}
                              key={`${index}quantity`}
                              name={[field.name, "quantity"]}
                            >
                              <ReadOnlyFormItemComponent />
                            </Form.Item>
                          </td>
                          <td>
                            <Form.Item
                              span={2}
                              //label={t("joblines.fields.mod_lb_hrs")}
                              key={`${index}act_price`}
                              name={[field.name, "act_price"]}
                            >
                              <ReadOnlyFormItemComponent type="currency" />
                            </Form.Item>
                          </td>
                          <td>
                            <Form.Item
                              span={2}
                              //label={t("joblines.fields.mod_lb_hrs")}
                              key={`${index}cost`}
                              name={[field.name, "cost"]}
                            >
                              <ReadOnlyFormItemComponent type="currency" />
                            </Form.Item>
                          </td>

                          <td>
                            <Form.Item
                              span={2}
                              //label={t("joblines.fields.mod_lb_hrs")}
                              key={`${index}cm_received`}
                              name={[field.name, "cm_received"]}
                              valuePropName="checked"
                            >
                              <Checkbox />
                            </Form.Item>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </>
              );
            }}
          </Form.List>
        );
      }}
    </Form.Item>
  );
}
