import React, {PureComponent} from 'react';
import PropTypes from "prop-types";
import {v4 as uuidv4} from "uuid";
import {Droppable} from "@hello-pangea/dnd";
import {ProductItem} from "./ProductItem.jsx";

/**
 * Component that renders the backlog in the aside
 */
export class Backlog extends PureComponent {

    static get propTypes() {
        return {
            currency: PropTypes.string,
            data: PropTypes.object.isRequired,
            items: PropTypes.object,
            isMobile: PropTypes.bool,
            onClickAddItem: PropTypes.func,
            onClickToggleMobileSideMenu: PropTypes.func,
        };
    }

    static get defaultProps() {
        return {
            items: {},
        };
    }

    render() {
        const {
            currency,
            data,
            items,
            onClickAddItem,
            onClickToggleMobileSideMenu,
            isMobile,
        } = this.props;


        const ordered_groups = data.categories.map(groupItem => ({
            name: groupItem.name,
            items: groupItem.itemIds.map(itemId => items[itemId])
        }));
        let item_index = -1;
        const groups = ordered_groups.map((group, g_index) => {
                return (
                    <div className="accordion-item" key={`${group.name}`}>
                        <h2 className="accordion-header">
                            <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target={`#collapse${g_index}`} aria-expanded="true"
                                    aria-controls={`collapse${g_index}`}>
                                {group.name}
                            </button>
                        </h2>
                        <div id={`collapse${g_index}`} className="accordion-collapse collapse" aria-labelledby="headingOne"
                             data-bs-parent="#accordion_categories">
                            <div className="accordion-body">
                                {group.items.map(item => {
                                    item_index++;
                                    return (
                                        <ProductItem
                                            key={item.id}
                                            id={uuidv4()}
                                            index={item_index}
                                            name={`${item.name_number} ${item.name}`}
                                            name_codename={item.name_codename}
                                            price={item.price}
                                            currency={currency}
                                            image={`/images/${item.image}`}
                                            specs={item.specs}
                                            datasheet_file={item.datasheet_file}
                                            datasheet_name={item.datasheet_name}
                                            onClickAddItem={onClickAddItem}
                                        ></ProductItem>
                                    )
                                })}
                            </div>
                        </div>
                    </div>
                );
            }
        );

        return (
            <Droppable
                droppableId={data.id}
                isDropDisabled={true}>

                {(provided) => (
                    <div
                        className="backlog-container"
                        ref={provided.innerRef}
                        {...provided.droppableProps}>

                        {isMobile ? (
                            <div className="mobileCloseMenu">
                                <button onClick={onClickToggleMobileSideMenu}>
                                    <img src="/images/shop/icon-close-white.svg" alt="add"/>
                                </button>
                            </div>
                        ) : null}

                        <div className="accordion accordion-flush" id="accordion_categories">
                            {groups}
                        </div>

                        {provided.placeholder && (
                            <div style={{display: 'none'}}>
                                {provided.placeholder}
                            </div>
                        )}
                    </div>
                )}

            </Droppable>
        );
    }
}