import FusePageSimple from "@fuse/core/FusePageSimple";
import {
  Autocomplete,
  Card,
  CardActions,
  CardContent,
  CardHeader,
  Divider,
  TextField,
  styled,
  Button,
  Grid,
} from "@mui/material";
import { useState } from "react";

const FormularioProductoRender = () => {
  const [formData, setFormData] = useState({
    codigo: "",
    tipo: "",
    nombre: "",
    descripcion: "",
    stockMinimo: "",
    margenGanancia: "",
    estado: "",
  });

  const [datosCargados, setDatosCargados] = useState(false);

  const cargarDatosDesdeBD = () => {
    setDatosCargados(true);
  };

  return (
    <Card className="m-20 p-24">
      <CardHeader title="Registro producto" className="text-16 font-bold " />
      <Divider />
      <CardContent className="flex">
        <Grid className="grid grid-cols-1 sm:grid-cols-6  gap-24 w-full min-w-0 p-24">
          <TextField
            className="mt-8 mb-16 sm:col-span-3 lg:col-span-3"
            required
            label="Código"
            id="codigo"
            name="codigo"
            variant="outlined"
            fullWidth
          />

          <Autocomplete
            className="mt-8 mb-16 sm:col-span-3 lg:col-span-3"
            multiple
            freeSolo
            options={[]}
            /* value={value }
						onChange={(event, newValue) => {
							onChange(newValue);
						}} */
            renderInput={(params) => (
              <TextField
                {...params}
                placeholder="Seleccione el tipo de producto"
                label="Tipo"
                variant="outlined"
                InputLabelProps={{
                  shrink: true,
                }}
              />
            )}
          />

          <TextField
            className="mt-8 mb-16 sm:col-span-3 lg:col-span-3"
            required
            label="Nombre"
            id="nombre"
            name="nombre"
            variant="outlined"
            fullWidth
          />

          <Autocomplete
            className="mt-8 mb-16 sm:col-span-3"
            multiple
            freeSolo
            options={["Activo", "Inactivo"]}
            renderInput={(params) => (
              <TextField
                {...params}
                placeholder="Seleccione el estado del producto"
                label="Estado"
                variant="outlined"
                InputLabelProps={{
                  shrink: true,
                }}
              />
            )}
          />

          <TextField
            className="mt-8 mb-16 sm:col-span-3 lg:col-span-3"
            required
            label="Stock Mínimo"
            id="stockMinimo"
            name="stockMinimo"
            variant="outlined"
            fullWidth
          />

          <TextField
            className="mt-8 mb-16 sm:col-span-3 md:col-span-3"
            required
            label="Margen de Ganancia"
            id="margenGanancia"
            name="margenGanancia"
            variant="outlined"
            fullWidth
          />

          <TextField
            className="mt-8 mb-16 sm:col-span-6 lg:col-span-6"
            id="descripcion"
            label="Descripción"
            name="descripcion"
            type="text"
            multiline
            rows={5}
            variant="outlined"
            fullWidth
          />
        </Grid>
      </CardContent>
      <CardActions
      className=""
      >
        <Button
          className="w-320"
          variant="contained"
          size="small"
          color="secondary"
        >
          Guardar{" "}
        </Button>
        {datosCargados && (
        <Button
          className="w-320"
          variant="contained"
          size="small"
          color="primary"
        >
          Actualizar{" "}
        </Button>
        )}
      </CardActions>
    </Card>
  );
};

export default FormularioProductoRender;
