import React from 'react';
import {SummaryPopup} from "./options/SummaryPopup";
import {formatMoney} from "./utils";
import {WarningIndicator} from "./CardWarnings";
import {useShopStore} from "./shop_store";

/**
 * Components that displays the list of card that are used in the crate.
 * It is a summary of purchase
 */
export function OrderSummary() {

    const {
        currency,
        crates,
        total_price,
        crateParams,
        deleteCard,
        setHighlight,
        resetHighlight,
        highlighted,
        clearCrate,
        clearAll
    } = useShopStore(state =>({
        currency: state.currency,
        crates: state.crates,
        total_price: state.totalOrderPrice(),
        crateParams: state.crateParams,
        deleteCard: state.deleteCard,
        setHighlight: state.highlightCard,
        resetHighlight: state.highlightReset,
        highlighted: state.highlighted,
        clearAll: state.clearAll,
        clearCrate: state.clearCrate
    }));

    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>

                {crates.map((crate, _i) => {
                    let crate_type = crateParams(crate.crate_mode);
                    return (
                        <tbody key={"summary_crate_body" + crate.id}>
                        <tr key={"summary_crate_" + crate.id}>
                            <td className="item-card-name">{crate_type.name}</td>
                            <td className="price">
                                <div>
                                    {`${currency} ${formatMoney(crate_type.price)}`}

                                    <button style={{'opacity': '0', 'cursor': 'initial'}}>
                                        <img src="/images/shop/icon-remove.svg"/>
                                    </button>
                                </div>

                                <span style={{
                                    'display': 'inline-block',
                                    'width': '30px',
                                }}>&nbsp;</span>
                            </td>
                        </tr>
                        {crate.items.map((item, index) => {
                            const options = item && item.options;
                            const options_data = item && item.options_data;
                            const warnings = item && item.show_warnings;
                            const selected = crate.id === highlighted.crate && index === highlighted.card;

                            return (<tr key={"summary_crate_" + crate.id + item.id}
                                        className={`hoverable ${selected ? 'selected' : ''}`}
                                        onClick={() => setHighlight(crate.id, index)}
                                        onMouseEnter={() => setHighlight(crate.id, index)}
                                        onMouseLeave={() => resetHighlight()}>
                                <td className="item-card-name">
                                    <div>{`${item.name_number} ${item.name} ${item.name_codename}`}</div>
                                </td>

                                <td className="price">
                                    <div className="d-inline-flex align-content-center">
                                        {`${currency} ${formatMoney(item.price)}`}

                                        <button onClick={() => deleteCard(crate.id, index)}>
                                            <img src="/images/shop/icon-remove.svg"/>
                                        </button>

                                        <div style={{'width': '45px', 'height': '20px'}}
                                             className="d-inline-flex align-content-center align-self-center justify-content-evenly">
                                            {(warnings && warnings.length > 0 ? (
                                                <WarningIndicator warnings={warnings}/>
                                            ) : (
                                                <span style={{
                                                    'display': 'inline-block',
                                                    'width': '20px',
                                                }}>&nbsp;</span>
                                            ))}
                                            {((options && options_data) ? (
                                                <SummaryPopup id={item.id + "options"} options={options}
                                                              data={options_data}/>
                                            ) : (
                                                <span style={{
                                                    'display': 'inline-block',
                                                    'width': '20px',
                                                }}>&nbsp;</span>
                                            ))}
                                        </div>
                                    </div>
                                </td>
                            </tr>);
                        })}
                        </tbody>
                    )
                })}

                <tfoot>
                <tr>
                    <td className="item-card-name">Price estimate</td>
                    <td className="price">
                        <div>
                            {currency} {formatMoney(total_price)}
                            <button style={{'opacity': '0', 'cursor': 'initial'}}>
                                <img src="/images/shop/icon-remove.svg" alt="icon remove"/>
                            </button>
                        </div>

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

            </table>

        </div>
    );
}