import React, {PureComponent} from 'react'
import PropTypes from "prop-types";
import {Draggable} from "@hello-pangea/dnd";
import {DialogPopup} from "./options/DialogPopup.jsx";
import {productStyle} from "./utils";
import {Resources} from "./Resources.jsx";
import {Warnings} from "./Warnings.jsx";

/**
 * Component that renders a product.
 * Used in the crate
 */
export class ProductCartItem extends PureComponent {

    static get propTypes() {
        return {
            isMobile: PropTypes.bool,
            isTouch: PropTypes.bool,
            hovered: PropTypes.bool,
            first: PropTypes.bool,
            last: PropTypes.bool,
            index: PropTypes.number.isRequired,
            model: PropTypes.object.isRequired,
            data: PropTypes.object,
            ext_data: PropTypes.object,
            resources: PropTypes.object,
            onToggleOverlayRemove: PropTypes.func,
            onClickRemoveItem: PropTypes.func,
            onClickItem: PropTypes.func,
            onCardUpdate: PropTypes.func,
        };
    }

    static get defaultProps() {
        return {
            hovered: false,
        };
    }

    constructor(props) {
        super(props);
        this.handleOnMouseEnterRemoveItem = this.handleOnMouseEnterRemoveItem.bind(this);
        this.handleOnMouseLeaveRemoveItem = this.handleOnMouseLeaveRemoveItem.bind(this);
        this.handleOnClickRemoveItem = this.handleOnClickRemoveItem.bind(this);
        this.handleOnClickItem = this.handleOnClickItem.bind(this);
    }

    handleOnMouseEnterRemoveItem(index, e) {
        if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
            this.props.onToggleOverlayRemove(index, true);
        }
        e.preventDefault();
    }

    handleOnMouseLeaveRemoveItem(index, e) {
        if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
            this.props.onToggleOverlayRemove(index, false);
        }
        e.preventDefault();
    }

    handleOnClickItem(index, e) {
        if (this.props.onClickItem && this.props.isTouch) {
            this.props.onClickItem(index);
        }
        e.preventDefault();
    }

    handleOnClickRemoveItem(index, e) {
        if (this.props.onClickRemoveItem) {
            this.props.onClickRemoveItem(index);
        }
    }

    render() {
        const {
            hovered,
            model,
            data,
            index,
            first,
            last,
            ext_data,
            onCardUpdate,
        } = this.props;

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

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


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

                {(provided, snapshot) => (
                    <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={{ ...productStyle(
                                provided.draggableProps.style,
                                snapshot,
                                true,
                                !!hovered,
                                !!model.selected,
                                true
                            )}}
                        onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
                        onMouseLeave={this.handleOnMouseLeaveRemoveItem.bind(this, index)}
                    >

                        {/* warning container */}

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

                            {options && (
                                <DialogPopup
                                    options={options}
                                    data={options_data}
                                    options_class={model.options_class}
                                    key={"popover" + index}
                                    id={"popover" + index}
                                    big={model.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();
                                        })
                                    }}
                                />
                            )}
                        </div>

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

                        <div
                            onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
                            onClick={this.handleOnClickItem.bind(this, index)}
                        >

                            <img
                                className='item-cart'
                                src={`/images${model.image}`} />
                        </div>

                        {/* remove container */}
                        <div
                            style={{'display': model.showOverlayRemove ? 'flex':'none'}}
                            className="overlayRemove"
                            onClick={this.handleOnClickRemoveItem.bind(this, index)}>

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

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

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


                    </div>
                )}

            </Draggable>
        );
    }
}