import React from 'react';
import {useShopStore} from "./shop_store";
import {SummaryCrates} from "./SummaryCrates";
import {SummaryTotalPrice} from "./SummaryTotalPrice";

// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";


/**
 * Components that displays the list of card that are used in the crate.
 * It is a summary of purchase
 */
export function OrderSummary() {
    // #!render_count
    const renderCount = useRenderCount();
    const clearAll = useShopStore((state) => state.clearAll);

    // #!render_count
    console.log("OrderSummary renders: ", renderCount)

    return (
        <div className="summary-price">

            <table>

                <thead>
                <tr>
                    <td colSpan="2" className="summary-remove-all">
                        <span className="item-card-name">Remove all cards</span>

                        <button onClick={clearAll}>
                            <img src="/images/shop/icon-remove.svg"/>
                        </button>
                    </td>
                </tr>
                </thead>

                <SummaryCrates/>

                <tfoot>
                <tr>
                    <td className="item-card-name">Price estimate</td>
                    <td className="price">
                        <SummaryTotalPrice/>

                        <span style={{
                            'display': 'inline-block',
                            'width': '30px',
                        }}>&nbsp;</span>
                    </td>
                </tr>
                </tfoot>

            </table>

        </div>
    );
}