import { useMutation } from "@apollo/client/react";
import { Form, Modal } from "antd";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { INSERT_INVENTORY_LINE, UPDATE_INVENTORY_LINE } from "../../graphql/inventory.queries";
import { toggleModalVisible } from "../../redux/modals/modals.actions";
import { selectInventoryUpsert } from "../../redux/modals/modals.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import InventoryUpsertModal from "./inventory-upsert-modal.component";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  inventoryUpsertModal: selectInventoryUpsert
});
const mapDispatchToProps = (dispatch) => ({
  toggleModalVisible: () => dispatch(toggleModalVisible("inventoryUpsert"))
});

export function InventoryUpsertModalContainer({ bodyshop, inventoryUpsertModal, toggleModalVisible }) {
  const { t } = useTranslation();
  const [insertInventory] = useMutation(INSERT_INVENTORY_LINE);
  const [updateInventoryLine] = useMutation(UPDATE_INVENTORY_LINE);
  const notification = useNotification();

  const { open, context, actions } = inventoryUpsertModal;
  const { existingInventory } = context;
  const { refetch } = actions;

  const [form] = Form.useForm();

  useEffect(() => {
    //Required to prevent infinite looping.
    if (existingInventory && open) {
      form.setFieldsValue(existingInventory);
    } else if (!existingInventory && open) {
      form.resetFields();
    }
  }, [existingInventory, form, open]);

  const handleFinish = async (formValues) => {
    const values = formValues;

    if (existingInventory) {
      logImEXEvent("inventory_update");

      updateInventoryLine({
        variables: {
          inventoryId: existingInventory.id,
          inventoryItem: values
        }
      }).then(() => {
        notification.success({
          title: t("inventory.successes.updated")
        });
      });
      // if (refetch) refetch();
      toggleModalVisible();
    } else {
      logImEXEvent("inventory_insert");

      await insertInventory({
        variables: {
          inventoryItem: { shopid: bodyshop.id, ...values }
        },
        update(cache, { data }) {
          cache.modify({
            fields: {
              inventory(existingInv) {
                return [...existingInv, data.insert_inventory_one];
              }
            }
          });
        }
      });

      if (refetch) refetch();
      form.resetFields();
      toggleModalVisible();
      notification.success({
        title: t("inventory.successes.inserted")
      });
    }
  };

  return (
    <Modal
      title={existingInventory ? t("inventory.actions.edit") : t("inventory.actions.new")}
      open={open}
      okText={t("general.actions.save")}
      onOk={() => {
        form.submit();
      }}
      onCancel={() => {
        toggleModalVisible();
      }}
      destroyOnHidden
    >
      <Form form={form} onFinish={handleFinish} layout="vertical">
        <InventoryUpsertModal form={form} />
      </Form>
    </Modal>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(InventoryUpsertModalContainer);