import { Box, Grid, Typography, Divider, Button, TextField } from '@mui/material';
import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
import TableInvoice from './components/tableInvoice/TableInvoice';
import { ItemInvoice } from './DataInvoiceInterface';

interface Props {
	handleAddItem: () => void;
	items: ItemInvoice[];
}
function DataInvoiceRender({ handleAddItem, items }: Props) {
	return (
		<Box className="mt-10  p-20 shadow-2 rounded-8">
			<Grid
				container
				spacing={2}
			>
				<Grid
					item
					xs={12}
					md={10}
				>
					<Typography
						component="h3"
						className="mb-7 text-16"
					>
						Datos factura
					</Typography>
				</Grid>
				<Grid
					item
					xs={12}
					md={2}
					className="flex justify-end"
				>
					<Button
						color="primary"
						variant="outlined"
						className="rounded-6"
						size="small"
						onClick={handleAddItem}
						startIcon={
							<FuseSvgIcon
								className="text-48"
								size={24}
								color="action"
							>
								heroicons-outline:plus
							</FuseSvgIcon>
						}
					>
						Agregar{' '}
					</Button>
				</Grid>
				<Grid
					item
					xs={12}
				>
					<Divider className="border-1" />
				</Grid>
				<Grid
					item
					xs={12}
					md={2}
				>
					<TextField
						label="Serial"
						size="small"
						variant="outlined"
						fullWidth
						InputLabelProps={{
							shrink: true
						}}
					/>
				</Grid>
				<Grid
					item
					xs={12}
					md={2}
				>
					<TextField
						label="Fecha factura"
						size="small"
						variant="outlined"
						type="date"
						fullWidth
						InputLabelProps={{
							shrink: true
						}}
					/>
				</Grid>
				<Grid
					item
					xs={12}
					md={2}
				>
					<TextField
						label="Fecha creada"
						size="small"
						variant="outlined"
						type="date"
						fullWidth
						InputLabelProps={{
							shrink: true
						}}
					/>
				</Grid>
			</Grid>
			<Grid
				container
				spacing={2}
			>
				<Grid
					item
					xs={12}
				>
					<TableInvoice />
				</Grid>
				<Grid
					item
					xs={7}
					md={9}
				/>
				<Grid
					item
					xs={2}
					md={2}
				>
					<Typography
						variant="subtitle2"
						gutterBottom
					>
						Sub Total:
					</Typography>
				</Grid>
				<Grid
					item
					xs={3}
					md={1}
					className="item"
				>
					<Typography
						variant="subtitle2"
						gutterBottom
					>
						$10
					</Typography>
				</Grid>
				<Grid
					item
					xs={7}
					md={9}
				/>
				<Grid
					item
					xs={2}
					md={2}
				>
					<Typography
						variant="subtitle2"
						gutterBottom
					>
						Iva 12%:
					</Typography>
				</Grid>
				<Grid
					item
					xs={3}
					md={1}
					className="item"
				>
					<Typography
						variant="subtitle2"
						gutterBottom
					>
						$5
					</Typography>
				</Grid>
				<Grid
					item
					xs={7}
					md={9}
				/>
				<Grid
					item
					xs={2}
					md={2}
				>
					<Typography
						variant="subtitle2"
						gutterBottom
					>
						Total:
					</Typography>
				</Grid>
				<Grid
					item
					xs={3}
					md={1}
					className="item"
				>
					<Typography
						variant="subtitle2"
						gutterBottom
					>
						$15
					</Typography>
				</Grid>
			</Grid>
		</Box>
	);
}

export default DataInvoiceRender;