import React from 'react'
import {Draggable} from "@hello-pangea/dnd";
import {DialogPopup} from "./options/DialogPopup";
import {productStyle} from "./utils";
import {Resources} from "./Resources";
import {CardWarnings} from "./CardWarnings";
import {useShopStore} from "./shop_store";

/**
 * Component that renders a product.
 * Used in the crate
 */
export function ProductCartItem({card_index, crate_index, ext_data, first, last}) {
    const {card, crate, highlighted, setHighlight, removeHighlight, onCardUpdate, onCardRemove} = useShopStore(state => ({
        card: state.crates[crate_index].items[card_index],
        highlighted: state.crates[crate_index].id === state.highlighted.crate && card_index === state.highlighted.card,
        crate: state.crates[crate_index],
        setHighlight: state.highlightCard,
        removeHighlight: state.highlightReset,
        onCardUpdate: state.updateOptions,
        onCardRemove: state.deleteCard
    }))

    let options, options_data;
    const warnings = card && card.show_warnings;
    const resources = card && card.counted_resources;

    if (card && card.options) {
        options = card.options;
        if (!card.options_data) card.options_data = {};
        options_data = card.options_data;
        options_data.ext_data = ext_data;
    }

    return (
        <Draggable draggableId={card.id} index={card_index}>

            {(provided, snapshot) => (
                <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                        ...productStyle(
                            provided.draggableProps.style,
                            snapshot,
                            true,
                            !!highlighted,
                            false,
                            true
                        )
                    }}
                    onMouseEnter={() => setHighlight(crate.id, card_index)}
                    onMouseLeave={removeHighlight}
                >

                    {/* warning container */}

                    <div className="progress-container warning d-flex justify-content-evenly">
                        {warnings && warnings.length > 0 &&
                            (<CardWarnings warnings={warnings} prefix={card_index}/>)
                        }

                        {options && (
                            <DialogPopup
                                options={options}
                                data={options_data}
                                options_class={card.options_class}
                                key={"popover" + card_index}
                                id={"popover" + card_index}
                                big={card.size === "big"}
                                first={first}
                                last={last}
                                target={{
                                    construct: ((outvar, value) => {
                                        // console.log("construct", outvar, value, options_data);
                                        options_data[outvar] = value;
                                    }),
                                    update: ((outvar, value) => {
                                        // console.log("update", outvar, value, options_data);
                                        if (outvar in options_data) options_data[outvar] = value;
                                        onCardUpdate(crate.id, card_index, {[outvar]: value});
                                    })
                                }}
                            />
                        )}
                    </div>

                    <h6>{card.name_number}</h6>

                    <div
                        onMouseEnter={() => setHighlight(crate.id, card_index)}
                        onClick={() => setHighlight(crate.id, card_index)}
                    >

                        <img
                            className='item-cart'
                            src={card.image}/>
                    </div>

                    {/* remove container */}
                    <div
                        style={{'display': highlighted ? 'flex' : 'none'}}
                        className="overlayRemove"
                        onClick={() => onCardRemove(crate.id, card_index)}>

                        <img src="/images/shop/icon-remove.svg" alt="rm"/>

                        <p>Remove</p>
                    </div>

                    {/* progression container */}
                    {resources && (
                        <Resources resources={resources}/>
                    )}


                </div>
            )}

        </Draggable>
    );
}