import { faTimes } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const InvoiceItem = ({ invoice, onCancel }) => {

    const productTotal = (p) => {
        return (p.quantity * (p.product.status == 3 || p.product.status == 4 ? p.product.promoPrice : p.product.price))
    }

    const getPriceHTML = () => {

        const tpsRate = 5;
        const tvqRate = 9.975;

        var price = 0;
        var tps = 0;
        var tvq = 0;

        invoice.products.map((p) => {
            price += productTotal(p);
        });

        tps = price * (tpsRate / 100);
        tvq = price * (tvqRate / 100);

        return (
            <div className="invoice-item-price">
                Sous-total = {price.toFixed(2)} $ CA<br />
                + TPS ({tpsRate}%) = {tps.toFixed(2)} $ CA<br />
                + TVQ ({tvqRate}%) = {tvq.toFixed(2)} $ CA<br />
                <b>Total = {(price + tps + tvq).toFixed(2)} $ CA</b>
            </div>
        );
    }

    const getStatus = (statusCode) => {
        switch (statusCode) {

            case 0:
                return (
                    <>
                        Confirmé
                    </>
                )
            case 1:
                return (
                    <>
                        Cancellé
                    </>
                )
            case 2:
                return (
                    <>
                        En préparation
                    </>
                )
            case 3:
                return (
                    <>
                        En expédition
                    </>
                )
            case 4:
                return (
                    <>
                        Expédié
                    </>
                )
            case 5:
                return (
                    <>
                        Retourné
                    </>
                )

            default:
                return (
                    <>
                        Status Invalide
                    </>
                )
        }
    }

    return (

        <div className="invoice-item-container">
            <div className="invoice-item-info">
                {invoice.status != null ?
                    <div>
                        #{invoice.id} ({getStatus(invoice.status)})
                    </div>
                    :
                    null
                }
                <div className="invoice-item-expedition">
                    <b>Adresse d'expédition:</b><br />
                    {invoice.firstName} {invoice.lastName}<br />
                    {invoice.shippingAddress.civicNumber} {invoice.shippingAddress.street} <br />
                    {invoice.shippingAddress.appartment != null ? <>App: {invoice.shippingAddress.appartment} <br /></> : null}
                    {invoice.shippingAddress.city}, {invoice.shippingAddress.province} {invoice.shippingAddress.postalCode}<br />
                    {invoice.shippingAddress.country}<br />
                </div>
            </div>
            <div className="invoice-item-products">
                <div className="invoice-product-delete">
                    <h4 className='simple-item-title' >Produits</h4>
                    {(invoice.status == 0 || invoice.status == 2 )&&
                        <h1 className='simple-item-buttons'><FontAwesomeIcon icon={faTimes} className='btn-effacer-morceau' style={{ color: "red", cursor: 'pointer', margin: 'auto' }}
                            onClick={() => onCancel(invoice.id)} /></h1>}
                </div>
                <ul className="invoice-item-product-list">
                    {invoice.products.map((p) => (
                        <li key={p.id}>{p.quantity} x {p.product.title} <br /> <b>{productTotal(p).toFixed(2)} $ CA</b></li>
                    ))}
                </ul>
                <>
                    {getPriceHTML()}
                </>
            </div>
        </div>
    );

}

export default InvoiceItem;