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

const OrderConfirmation = ({ orderId, billTo, shipTo, paymentMode, cartItem }) => {
  const subtotal = useSelector(selectCartSubtotal)
  const [ownerDetails, setOwnerDetails] = useState()
  const token = isAutheticated()
  // const getData = async () => {
  //   let res = await Axios.get(`/api/rd-get-me`, {
  //     headers: {
  //       Authorization: `Bearer ${token}`,
  //     },
  //   })
  //   if (res.data.success) {
  //     setOwnerDetails({ ...res.data.user })
  //   }
  // }

  // Calculate total GST for the entire cart
  const totalGST = cartItem.reduce((acc, item) => {
    // console.log(item)
    const gstAmount = (item.price * item.GST) / 100
    return acc + gstAmount * item.count
  }, 0)
  return (
    <Box>
      <Box sx={{ my: '2rem', background: '#fff', padding: '1rem', borderRadius: '0.8rem' }}>
        <Typography variant="h4" textAlign={'center'} marginBottom={2}>
          OrderId : {orderId}
        </Typography>

        <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 item sm={12} md={12} lg={12}>
            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
              SBU: <strong>{ownerDetails?.SBU}</strong>
            </Typography>
          </Grid>
        </Grid>
      </Box>

      <Box my={8}>
        <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 sx={{ fontWeight: 'bold' }}>Product</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>Category</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>Brand</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>SKU</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>Quantity</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>Price</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>GST</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>Subtotal</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {cartItem.map((row, index) => {
                      const gstAmount = (row.price * row.GST) / 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.category.categoryName}</TableCell>
                          <TableCell>{row.brand.brandName}</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={7} />
                      <TableCell>
                        Subtotal:<strong> ₹ {subtotal}</strong>
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell colSpan={7} />
                      <TableCell>
                        Total GST:<strong> ₹ {totalGST} </strong>
                      </TableCell>
                    </TableRow>

                    <TableRow>
                      <TableCell colSpan={7} />
                      <TableCell>
                        Grand Total: <strong> ₹ {subtotal + totalGST}</strong>
                      </TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </TableContainer>
            </Box>
          </Grid>
        </Grid>
      </Box>
    </Box>
  )
}

export default OrderConfirmation