import {
  Box,
  Button,
  Container,
  Grid,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
} from '@mui/material'
import React from 'react'
import { useSelector } from 'react-redux'
import { selectCartSubtotal } from '../../../redux-store/CartStore/ducs'

const ReviewOrder = ({ orderId, billTo, shipTo, paymentMode, cartItem, handleTabChange }) => {
  const subtotal = useSelector(selectCartSubtotal)

  // Calculate total GST for the entire cart
  const totalGST = cartItem.reduce((acc, item) => {
    // console.log(item)
    const gstAmount = (item.price * item.GST.tax) / 100
    return acc + gstAmount * item.count
  }, 0)
  return (
    <Box>
      <Box sx={{ my: '2rem', background: '#fff', padding: '1rem', borderRadius: '0.8rem' }}>
        <Grid container spacing={2}>
          <Grid item sm={6} md={6} lg={6}>
            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
              Bill Address
            </Typography>
            <Typography sx={{ mb: '0.5rem' }}>{billTo}</Typography>
          </Grid>
          <Grid item sm={6} md={6} lg={6}>
            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
              Ship Address
            </Typography>
            <Typography sx={{ mb: '0.5rem' }}>{shipTo}</Typography>
          </Grid>
          <Grid item sm={6} md={6} lg={6}>
            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
              Payment mode : <strong>{paymentMode}</strong>
            </Typography>
          </Grid>
        </Grid>
      </Box>

      <Box my={4}>
        <Grid container spacing={5}>
          <Grid item xs={12}>
            <Box>
              <TableContainer
                component={Paper}
                elevation={0}
                sx={{ borderBottom: '1.5px solid #CFCFD5', borderRadius: 0 }}
              >
                <Table sx={{ minWidth: 650 }} size="large">
                  <TableHead>
                    <TableRow>
                      <TableCell>Product</TableCell>
                      <TableCell>HSN</TableCell>
                      <TableCell>Quantity</TableCell>
                      <TableCell>Price</TableCell>
                      <TableCell>GST</TableCell>
                      <TableCell>Subtotal</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {cartItem.map((row, index) => {
                      const gstAmount = (row.price * row.GST.tax) / 100

                      return (
                        <TableRow
                          key={index}
                          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                        >
                          <TableCell>
                            <Box sx={{ display: 'flex' }}>
                              {/* <img
                                src={row.product.image[0].url}
                                alt={row.product.name}
                                style={{ width: '100px', height: '70px', marginRight: '1rem' }}
                              /> */}
                              <Box>
                                <Typography fontWeight={600}>{row.name}</Typography>
                              </Box>
                            </Box>
                          </TableCell>
                          <TableCell>{row.SKU}</TableCell>
                          <TableCell>{row.count}</TableCell>
                          <TableCell>₹{row.price}</TableCell>
                          <TableCell>₹{gstAmount}</TableCell>
                          <TableCell>₹{row.price * row.count}</TableCell>
                        </TableRow>
                      )
                    })}
                    <TableRow>
                      <TableCell colSpan={5} />
                      <TableCell>
                        Subtotal:<strong> ₹ {subtotal}</strong>
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell colSpan={5} />
                      <TableCell>
                        Total GST:<strong> ₹ {totalGST} </strong>
                      </TableCell>
                    </TableRow>

                    <TableRow>
                      <TableCell colSpan={5} />
                      <TableCell>
                        Grand Total: <strong> ₹ {subtotal + totalGST}</strong>
                      </TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </TableContainer>
            </Box>
          </Grid>
        </Grid>
        <Box display={'flex'} justifyContent={'center'} mt={4} gap={10}>
          <Button variant="contained" color="primary" onClick={(e) => handleTabChange(e, 0)}>
            Update Order
          </Button>
          <Button variant="contained" color="success" onClick={(e) => handleTabChange(e, 3)}>
            Confirm Order
          </Button>
        </Box>
      </Box>
    </Box>
  )
}

export default ReviewOrder