import React, { useState } from 'react';
import {
  Box,
  TextField,
  Button,
  Typography,
  MenuItem,
  RadioGroup,
  FormControlLabel,
  Radio,
} from '@mui/material';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Grid from '@mui/material/Grid2';

const BillingForm = () => {

  const rows = [
    {
      img_src: 'https://via.placeholder.com/300',
      name: 'MELUR',
      description: 'Atma Sari New Raya Collection 2024',
      colour: 'black',
      quantity: 1,
      price: 335.50
    }
  ];

  const [shippingMethod, setShippingMethod] = useState('COD');

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission logic
    console.log('Form submitted');
  };

  const FieldContainer = ({ label, children }) => (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
      <Typography variant="body1" sx={{ fontWeight: 500, minWidth: 120 }}>
        {label}
      </Typography>
      {children}
    </Box>
  );

  return (
    <Box
     
      onSubmit={handleSubmit}
      sx={{
        width: '100%',
      }}
    >
      
      {/* Product List */}
      <TableContainer>
          <Table sx={{ minWidth: 650, mb: 5, backgroundColor:"#F7FBFF" }}>
            <TableHead>
              <TableRow>
                <TableCell width={150}>
                  <Typography variant='body1'>Item</Typography>
                </TableCell>
                <TableCell width={150}>
                  {/* This is just for table offset */}
                  <Typography variant='body1'></Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1'>Colour</Typography>
                </TableCell>
                <TableCell align='center'>

                  <Typography variant='body1'>Quantity</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1'>Unit Price</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1'>Shipping</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1'>Tax</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1'>Duties</Typography>
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {rows.map((row) => (
                <TableRow
                  key={row.id}
                  sx={{
                    '& td, & th': { border: 0 },
                    '&:last-child td, &:last-child th': { border: 0 }
                  }}
                >
                  <TableCell component="th" scope="row">
                    <img
                      src={row.img_src}
                      alt={row.img_src}
                      style={{
                        width: 100,
                        height: 100,
                        aspectRatio: '4 / 4',
                        objectFit: 'cover',
                      }}
                    />
                  </TableCell>
                  <TableCell>
                    <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{row.name}</Typography>
                    <Typography variant='body2'>{row.description}</Typography>
                  </TableCell>
                  <TableCell align='center'>
                    <Typography variant='body1' sx={{ fontWeight: "bold" }} >{row.colour}</Typography>
                  </TableCell>
                  <TableCell align='center'>
                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{row.quantity}</Typography>
                  </TableCell>
                  <TableCell align='center'>
                    <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                  </TableCell>
                  <TableCell align='center'>
                    <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                  </TableCell>
                  <TableCell align='center'>
                    <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                  </TableCell>
                  <TableCell align='center'>
                    <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>

    </Box>
  );
};

export default BillingForm;