import FusePageCarded from "@fuse/core/FusePageCarded";
import FusePageSimple from "@fuse/core/FusePageSimple";
import {
  Autocomplete,
  Card,
  CardActions,
  CardContent,
  CardHeader,
  Divider,
  TextField,
  styled,
  Button,
  Grid,
  Box,
} from "@mui/material";
import { Controller, useFormContext } from "react-hook-form";
import DataInvoice from "./components/dataInvoice/DataInvoice";
import DataClient from "./components/dataClient/DataClient";

const Root = styled(FusePageSimple)(({ theme }) => ({
  "& .FusePageSimple-header": {
    backgroundColor: theme.palette.background.paper,
    boxShadow: `inset 0 0 0 1px  ${theme.palette.divider}`,
  },
}));

const GenerateInvoiceRender = () => {
  return (
    <Card className=" m-20 p-24">
      <CardHeader
        title="Crear Factura de venta"
        className="text-16 font-bold "
      />
      <Divider />
      <DataInvoice />
      <DataClient />
      <CardContent>
        <Grid container spacing={2}>
          <Grid item xs={12} md={6}>
            <TextField
              className="mt-8 mb-16"
              required
              label="Name"
              autoFocus
              id="name"
              variant="outlined"
              fullWidth
              /* error={!!errors.name}
						helperText={errors?.name?.message as string} */
            />
          </Grid>
          <Grid item xs={12} md={6}>
            <TextField
              className="mt-8 mb-16"
              id="description"
              label="Description"
              type="text"
              multiline
              rows={5}
              variant="outlined"
              fullWidth
            />
          </Grid>
          <Grid item xs={12} md={6}>
            <Autocomplete
              className="mt-8 mb-16"
              multiple
              freeSolo
              options={[]}
              /* value={value }
						onChange={(event, newValue) => {
							onChange(newValue);
						}} */
              renderInput={(params) => (
                <TextField
                  {...params}
                  placeholder="Select multiple categories"
                  label="Categories"
                  variant="outlined"
                  InputLabelProps={{
                    shrink: true,
                  }}
                />
              )}
            />
          </Grid>
        </Grid>
      </CardContent>
      <CardActions>
        <Button
          className="w-320 "
          variant="contained"
          size="small"
          color="primary"
        >
          Guardar{" "}
        </Button>
      </CardActions>
    </Card>
  );
};

export default GenerateInvoiceRender;