import React from "react";
import { Form, Field } from "react-final-form";
import { submitItem, cancelSubmit } from "./searchSlice";
import { Container, TextField, Button, Typography } from "@material-ui/core";
import { useSelector, useDispatch } from "react-redux";
import { useTranslation } from "react-i18next";
import { unwrapResult } from "@reduxjs/toolkit";
import { incrementLabel, addAlert } from "../core/mainSlice";

const ItemForm = () => {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const selected_item = useSelector((state) => state.search.selected_item);
  const token = useSelector((state) => state.auth.token);
  const area = useSelector((state) => state.main.area);
  const label_id = useSelector((state) => state.main.label);
  const inventory_taking = useSelector((state) => state.main.inventory_taking);
  const payload = { ...selected_item };

  payload["area"] = area.id;
  payload["label_id"] = label_id.toString();
  payload["sap_id"] = payload["id"];
  payload["inventory_taking"] = inventory_taking.id;
  delete payload["owner"];
  delete payload["id"];

  return (
    <Container component="main">
      <Typography component="h1" variant="h5">
        {t("search.ItemForm.CheckItemData")}
      </Typography>
      <Form
        onSubmit={(values) => {
          dispatch(submitItem(values, token))
            .then(unwrapResult)
            .then((originalPromiseResult) => {
              dispatch(incrementLabel());
            })
            .catch((rejectedValueOrSerializedError) => {
              dispatch(addAlert(rejectedValueOrSerializedError));
            });
        }}
        initialValues={payload}
        render={({ handleSubmit, submitting, pristine, values }) => (
          <form onSubmit={handleSubmit} className="ui form error">
            <Field name="inventory_id">
              {({ input, meta }) => (
                <TextField
                  variant="outlined"
                  margin="normal"
                  fullWidth
                  value={payload.inventory_id}
                  label={t("search.ItemForm.EnterInventoryId")}
                  autoFocus
                  {...input}
                  type="number"
                />
              )}
            </Field>
            <Field name="serial_nbr">
              {({ input, meta }) => (
                <TextField
                  variant="outlined"
                  margin="normal"
                  fullWidth
                  value={payload.serial_nbr}
                  label={t("search.ItemForm.EnterSerialNbr")}
                  {...input}
                  type="text"
                />
              )}
            </Field>
            <Field name="name">
              {({ input, meta }) => (
                <TextField
                  variant="outlined"
                  margin="normal"
                  required
                  fullWidth
                  value={payload.name}
                  label={t("search.ItemForm.EnterItemName")}
                  {...input}
                  type="text"
                />
              )}
            </Field>
            <Field name="description">
              {({ input, meta }) => (
                <TextField
                  variant="outlined"
                  margin="normal"
                  fullWidth
                  value={payload.description}
                  label={t("search.ItemForm.EnterItemDescription")}
                  {...input}
                  type="text"
                />
              )}
            </Field>
            <Button type="submit" variant="contained" color="primary">
              {t("search.ItemForm.Confirm")}
            </Button>
            <Button
              variant="contained"
              onClick={() => {
                dispatch(cancelSubmit());
              }}
              color="secondary"
            >
              {t("search.ItemForm.Cancel")}
            </Button>
          </form>
        )}
      />
    </Container>
  );
};

export default ItemForm;