import FusePageCarded from "@fuse/core/FusePageCarded";
import FusePageSimple from "@fuse/core/FusePageSimple";
import {
  Autocomplete,
  Card,
  CardActions,
  CardContent,
  CardHeader,
  Divider,
  TextField,
  styled,
  Button,
} from "@mui/material";
import { Controller, useFormContext } from "react-hook-form";

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 />
      <CardContent>
        <TextField
          className="mt-8 mb-16"
          required
          label="Name"
          autoFocus
          id="name"
          variant="outlined"
          fullWidth
          /* error={!!errors.name}
						helperText={errors?.name?.message as string} */
        />

        <TextField
          className="mt-8 mb-16"
          id="description"
          label="Description"
          type="text"
          multiline
          rows={5}
          variant="outlined"
          fullWidth
        />

        <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,
              }}
            />
          )}
        />
      </CardContent>
      <CardActions>
        <Button
          className="w-320 "
          variant="contained"
          size="small"
          color="secondary"
        >
          Guardar{" "}
        </Button>
      </CardActions>
    </Card>
  );
};

export default GenerateInvoiceRender;
