import React, { Component } from 'react';
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
import CartItem from './CartItem.js';
import { withI18n } from '../i18n/withTranslation.js';


class CartDropdown extends Component {

  render() {
    const { 
      cartItems = [], 
      onClose, 
      onCheckout, 
      showDetailedSummary = false,
      deliveryMethod = '',
      deliveryCost = 0
    } = this.props;

    // Calculate the total weight of all items in the cart
    const totalWeight = cartItems.reduce((sum, item) => {
      const weightPerItem = item.weight || 0;
      const quantity = item.quantity || 1;
      return sum + weightPerItem * quantity;
    }, 0);

    // Calculate price breakdowns
    const priceCalculations = cartItems.reduce((acc, item) => {
      const totalItemPrice = item.price * item.quantity;
      const netPrice = totalItemPrice / (1 + item.vat / 100);
      const vatAmount = totalItemPrice - netPrice;
      
      acc.totalGross += totalItemPrice;
      acc.totalNet += netPrice;
      
      if (item.vat === 7) {
        acc.vat7 += vatAmount;
      } else if (item.vat === 19) {
        acc.vat19 += vatAmount;
      }
      
      return acc;
    }, { totalGross: 0, totalNet: 0, vat7: 0, vat19: 0 });

    // Calculate detailed summary with shipping (similar to OrderSummary)
    const currencyFormatter = new Intl.NumberFormat('de-DE', { 
      style: 'currency', 
      currency: 'EUR' 
    });
    
    const shippingNetPrice = deliveryCost > 0 ? deliveryCost / (1 + 19 / 100) : 0;
    const shippingVat = deliveryCost > 0 ? deliveryCost - shippingNetPrice : 0;
    const totalVat7 = priceCalculations.vat7;
    const totalVat19 = priceCalculations.vat19 + shippingVat;
    const totalGross = priceCalculations.totalGross + deliveryCost;

    return (
      <>
        <Box sx={{ bgcolor: 'primary.main', color: 'white', p: 2 }}>
          <Typography variant="h6">
            {cartItems.length} {cartItems.length === 1 ? (this.props.t ? this.props.t('cart.itemCount.singular') : 'Produkt') : (this.props.t ? this.props.t('cart.itemCount.plural') : 'Produkte')}
          </Typography>
        </Box>

        { cartItems && (
          <>
            <List sx={{ width: '100%' }}>
              {cartItems.map((item) => (
                <CartItem
                  key={item.id}
                  item={item}
                  id={item.id}
                />
              ))}
            </List>

            {/* Display total weight if greater than 0 */}
            {totalWeight > 0 && (
              <Typography variant="subtitle2" sx={{ px: 2, mb: 1 }}>
                {this.props.t ? this.props.t('cart.summary.totalWeight', { weight: totalWeight.toFixed(2) }) : `Gesamtgewicht: ${totalWeight.toFixed(2)} kg`}
              </Typography>
            )}

            {/* Price breakdown table */}
            {cartItems.length > 0 && (
              <Box sx={{ px: 2, mb: 2 }}>
                {showDetailedSummary ? (
                  // Detailed summary with shipping costs
                  <>
                    <Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
                      {this.props.t ? this.props.t('cart.summary.title') : 'Bestellübersicht'}
                    </Typography>
                    {deliveryMethod && (
                      <Typography variant="body2" sx={{ mb: 1, color: 'text.secondary' }}>
                        Versandart: {deliveryMethod}
                      </Typography>
                    )}
                    <Table size="small">
                      <TableBody>
                        <TableRow>
                          <TableCell>{this.props.t ? this.props.t('cart.summary.goodsNet') : 'Waren (netto):'}</TableCell>
                          <TableCell align="right">
                            {currencyFormatter.format(priceCalculations.totalNet)}
                          </TableCell>
                        </TableRow>
                        {deliveryCost > 0 && (
                          <TableRow>
                            <TableCell>{this.props.t ? this.props.t('cart.summary.shippingNet') : 'Versandkosten (netto):'}</TableCell>
                            <TableCell align="right">
                              {currencyFormatter.format(shippingNetPrice)}
                            </TableCell>
                          </TableRow>
                        )}
                        {totalVat7 > 0 && (
                          <TableRow>
                            <TableCell>{this.props.t ? this.props.t('tax.vat7') : '7% Mehrwertsteuer'}:</TableCell>
                            <TableCell align="right">
                              {currencyFormatter.format(totalVat7)}
                            </TableCell>
                          </TableRow>
                        )}
                        {totalVat19 > 0 && (
                          <TableRow>
                            <TableCell>{this.props.t ? this.props.t('tax.vat19WithShipping') : '19% Mehrwertsteuer (inkl. Versand)'}:</TableCell>
                            <TableCell align="right">
                              {currencyFormatter.format(totalVat19)}
                            </TableCell>
                          </TableRow>
                        )}
                        <TableRow>
                          <TableCell sx={{ fontWeight: 'bold' }}>{this.props.t ? this.props.t('cart.summary.totalGoods') : 'Gesamtsumme Waren:'}</TableCell>
                          <TableCell align="right" sx={{ fontWeight: 'bold' }}>
                            {currencyFormatter.format(priceCalculations.totalGross)}
                          </TableCell>
                        </TableRow>
                        <TableRow>
                          <TableCell sx={{ fontWeight: 'bold' }}>
                            {this.props.t ? this.props.t('cart.summary.shippingCosts') : 'Versandkosten:'}
                            {deliveryCost === 0 && priceCalculations.totalGross < 100 && (
                              <span style={{ color: '#2e7d32', fontSize: '0.8em', marginLeft: '4px' }}>
                                {this.props.t ? this.props.t('cart.summary.freeFrom100') : '(kostenlos ab 100€)'}
                              </span>
                            )}
                          </TableCell>
                          <TableCell align="right" sx={{ fontWeight: 'bold' }}>
                            {deliveryCost === 0 ? (
                              <span style={{ color: '#2e7d32' }}>{this.props.t ? this.props.t('cart.summary.free') : 'kostenlos'}</span>
                            ) : (
                              currencyFormatter.format(deliveryCost)
                            )}
                          </TableCell>
                        </TableRow>
                        <TableRow sx={{ borderTop: '1px solid #e0e0e0' }}>
                          <TableCell sx={{ fontWeight: 'bold', pt: 2 }}>{this.props.t ? this.props.t('cart.summary.total') : 'Gesamtsumme:'}</TableCell>
                          <TableCell align="right" sx={{ fontWeight: 'bold', pt: 2 }}>
                            {currencyFormatter.format(totalGross)}
                          </TableCell>
                        </TableRow>
                      </TableBody>
                    </Table>
                  </>
                ) : (
                  // Simple summary without shipping costs
                  <Table size="small">
                    <TableBody>
                      <TableRow>
                        <TableCell>{this.props.t ? this.props.t('tax.totalNet') : 'Gesamtnettopreis'}:</TableCell>
                        <TableCell align="right">
                          {new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(priceCalculations.totalNet)}
                        </TableCell>
                      </TableRow>
                      {priceCalculations.vat7 > 0 && (
                        <TableRow>
                          <TableCell>{this.props.t ? this.props.t('tax.vat7') : '7% Mehrwertsteuer'}:</TableCell>
                          <TableCell align="right">
                            {new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(priceCalculations.vat7)}
                          </TableCell>
                        </TableRow>
                      )}
                      {priceCalculations.vat19 > 0 && (
                        <TableRow>
                          <TableCell>{this.props.t ? this.props.t('tax.vat19') : '19% Mehrwertsteuer'}:</TableCell>
                          <TableCell align="right">
                            {new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(priceCalculations.vat19)}
                          </TableCell>
                        </TableRow>
                      )}
                      <TableRow>
                        <TableCell sx={{ fontWeight: 'bold' }}>{this.props.t ? this.props.t('tax.totalGross') : 'Gesamtbruttopreis ohne Versand'}:</TableCell>
                        <TableCell align="right" sx={{ fontWeight: 'bold' }}>
                          {new Intl.NumberFormat('de-DE', {style: 'currency', currency: 'EUR'}).format(priceCalculations.totalGross)}
                        </TableCell>
                      </TableRow>
                    </TableBody>
                  </Table>
                )}
              </Box>
            )}

            {onClose && (
              <Button 
                variant="outlined" 
                color="primary" 
                fullWidth
                onClick={onClose}
              >
                {this.props.t ? this.props.t('cart.continueShopping') : 'Weiter einkaufen'}
              </Button>
            )}

            {onCheckout && cartItems.length > 0 && (
              <Button 
                variant="contained" 
                color="secondary" 
                fullWidth
                sx={{ mt: 2 }}
                onClick={onCheckout}
              >
                {this.props.t ? this.props.t('cart.proceedToCheckout') : 'Weiter zur Kasse'}
              </Button>
            )}
          </>
        )}
      </>
    );
  }
}

export default withI18n()(CartDropdown);