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";
import {useRenderCount} from "@uidotdev/usehooks";

/**
 * Component that renders a product.
 * Used in the crate
 */
export function ProductCartItem({card_index, crate_index, ext_data, first, last}) {
    const renderCount = useRenderCount();


    const card = useShopStore((state) => state.crates[crate_index].items[card_index],
        (a, b) => a.id === b.id && a.show_warnings === b.show_warnings && a.counted_resources === b.counted_resources );
    const highlighted = useShopStore((state) => state.crates[crate_index].id === state.highlighted.crate && card_index === state.highlighted.card);
    const crate_id = useShopStore((state) => state.crates[crate_index].id);
    const setHighlight = useShopStore((state) => state.highlightCard);
    const removeHighlight = useShopStore((state) => state.highlightReset);
    const onCardUpdate = useShopStore((state) => state.updateOptions);
    const onCardRemove = useShopStore((state) => state.deleteCard);

    console.log("ProductCartItem renders: ", renderCount)

    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>
    );
}