import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { Grid, Button, TextField } from "@material-ui/core";
import {
  setSearchMode,
  setSearchValue,
  searchSap,
  invokeItemForm,
} from "./searchSlice";
import SapData from "./SapData";
import SearchIcon from "@material-ui/icons/Search";
import { IconButton } from "@material-ui/core";
import ItemForm from "./ItemForm";
import { useTranslation } from "react-i18next";
function ItemSearch() {
  const { t } = useTranslation();
  const mode = useSelector((state) => state.search.search_mode);
  const search_value = useSelector((state) => state.search.search_value);
  const selected_item = useSelector((state) => state.search.selected_item);
  const data = useSelector((state) => state.search.search_result);

  const dispatch = useDispatch();

  const renderSearchInput = () => {
    switch (mode) {
      case "inventory_id":
        return (
          <TextField
            label={t("search.ItemSearch.InventoryId")}
            helperText={t("search.ItemSearch.EnterInventoryId")}
            variant="outlined"
            type="number"
            value={search_value}
            onChange={(e) => dispatch(setSearchValue(e.target.value))}
          />
        );
      case "serial_nbr":
        return (
          <TextField
            label={t("search.ItemSearch.SerialNbr")}
            helperText={t("search.ItemSearch.EnterSerialNbr")}
            variant="outlined"
            value={search_value}
            onChange={(e) => dispatch(setSearchValue(e.target.value))}
          ></TextField>
        );
      default:
        return (
          <TextField
            label={t("search.ItemSearch.InventoryId")}
            helperText={t("search.ItemSearch.EnterInventoryId")}
            variant="outlined"
            type="number"
            value={search_value}
            onChange={(e) => dispatch(setSearchValue(e.target.value))}
          />
        );
    }
  };
  return (
    <Grid container spacing={0}>
      <Grid item xs={1}></Grid>
      <Grid item xs={5}>
        <Grid item xs={12} p={1}>
          <Button
            variant="contained"
            color="primary"
            onClick={() => dispatch(setSearchMode("inventory_id"))}
          >
            {t("search.ItemSearch.InventoryIdMode")}
          </Button>
          <Button
            variant="contained"
            color="primary"
            onClick={() => dispatch(setSearchMode("serial_nbr"))}
          >
            {t("search.ItemSearch.SerialNbrMode")}
          </Button>
          {data.length === 0 && (
            <Button
              variant="contained"
              color="secondary"
              onClick={() => dispatch(invokeItemForm())}
            >
              {t("search.ItemSearch.ManualMode")}
            </Button>
          )}
        </Grid>
        {renderSearchInput()}
        <IconButton
          aria-label="delete"
          color="primary"
          onClick={() =>
            dispatch(searchSap({ value: search_value, mode: mode }))
          }
        >
          <SearchIcon />
        </IconButton>
        {selected_item && <ItemForm />}
      </Grid>
      <Grid item xs={6}>
        <SapData />
      </Grid>
    </Grid>
  );
}

export default ItemSearch;