import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Price } from '@orderingstack/front-components-price';
import { MainProductNameWrapper, MainProductPriceWrapper, MainProductQuantityWrapper, MainProductWrapper, } from './style';
import ProductSubItems from '../ProductSubItems';
import Loader from 'react-loader-spinner';
import { PROCESSING } from '@orderingstack/front-components-common';
const OrderProduct = (props) => {
    const { line, fullMode = false, showItems = false, kdsFilter = '', kdsLayout = '', currency = '', } = props;
    const { product, quantity, price } = line;
    const productLineItems = 'items' in product &&
        Array.isArray(product.items) &&
        product.items.length > 0 &&
        product.items.map((item) => {
            showItems &&
                'items' in item &&
                Array.isArray(item.items) &&
                item.items.map((element) => {
                    const filteredGroup = element;
                    if ('items' in element && Array.isArray(element.items)) {
                        const filteredItems = element.items.filter((el) => el.extra && el.extra.KDS_FILTER === kdsFilter);
                        filteredGroup.items = filteredItems;
                        return filteredGroup;
                    }
                    return element;
                });
            return (_jsxs("div", { children: [item.literals && item.literals.name && (_jsx("div", { children: item.literals.name }, void 0)), Array.isArray(item.items) &&
                        item.items.map((item) => (_jsx(ProductSubItems, { item: item, fullMode: fullMode, kdsLayout: kdsLayout, currency: currency }, item.id)))] }, `${item.id}-item-line`));
        });
    return (_jsxs("div", { children: [_jsxs(MainProductWrapper, { children: [_jsxs(MainProductQuantityWrapper, { children: [quantity, " x"] }, void 0), _jsxs(MainProductNameWrapper, { children: [product.literals.name, ":"] }, void 0), _jsx(MainProductPriceWrapper, { children: _jsx(Price, { amount: price, currency: currency }, void 0) }, void 0), line.status === PROCESSING && (_jsx(Loader, { type: "ThreeDots", color: "#000000", height: 15 }, void 0))] }, void 0), _jsx("div", Object.assign({ style: { marginLeft: '30px' } }, { children: productLineItems }), void 0)] }, void 0));
};
export default OrderProduct;
//# sourceMappingURL=index.js.map