import * as React from 'react';
import * as ComponentLibrary from '@skava/ui-presets/dist/presets/Studio';
import { Video } from '@skava/ui-presets/dist/presets/Studio/Video';
import { AdSpot } from '@skava/ui-presets/dist/presets/Studio';
import { Carousel as ProductCarousel } from '@skava/packages/features/SwipableProductList/Carousel';
import { StyledTabbedProductList, StyledText, BackgroundColor, TabbedHeading, StyledMediaCarousel, StyledCategoryGrid, StyledFormBuilder, } from './styled';
import { Button } from './presets/Button';
import { FormBuilderWithHeading } from './presets/FormBuilderWithHeading';
const getTabbedProductEndPointsConfig = (items) => {
    return items.map(item => {
        const indexed = {};
        indexed.categoryId = item.categoryId;
        indexed.categoryName = item.categoryName;
        indexed.categoryAttribute = item.categoryName
            ? item.categoryName.replace(/[^A-Z0-9]/gi, '')
            : '';
        return indexed;
    });
};
const renderStudioWidget = (widget) => {
    const { properties, items } = widget;
    // console.log('[items]', items)
    // console.log('[properties]', properties)
    switch (widget.componentName) {
        case 'Video':
            const { src, ...remainingProps } = properties;
            return React.createElement(Video, Object.assign({ src: [src] }, remainingProps));
        /**
         * @todo remember to put this in a Preset
         */
        case 'AdSpot':
            const { identifier, htmlContent } = properties;
            return (React.createElement(React.Fragment, null,
                React.createElement("div", { id: identifier }),
                React.createElement(AdSpot, { identifier: identifier, htmlContent: htmlContent })));
        case 'ButtonsWithIcon':
            return React.createElement(Button, { list: items });
        case 'Text':
            return React.createElement(StyledText, Object.assign({}, properties));
        case 'ProductCarousel':
            return React.createElement(ProductCarousel, Object.assign({}, properties));
        case 'MediaCarousel':
            return (React.createElement(StyledMediaCarousel, Object.assign({}, properties, { list: items, arrowIconColor: 'white', arrowIconSize: '75px' })));
        case 'FormBuilderWithHeading':
            return (React.createElement(BackgroundColor, null,
                React.createElement(FormBuilderWithHeading, Object.assign({}, properties))));
        case 'FormBuilder':
            return (React.createElement(BackgroundColor, null,
                React.createElement(StyledFormBuilder, Object.assign({}, properties))));
        case 'TabbedProductTileListWithHeading':
            return (React.createElement(BackgroundColor, null,
                React.createElement(TabbedHeading, null, properties.heading),
                React.createElement(StyledTabbedProductList, Object.assign({ endpoints: getTabbedProductEndPointsConfig(items) }, properties))));
        case 'TabbedProductTileList':
            return (React.createElement(StyledTabbedProductList, Object.assign({ endpoints: getTabbedProductEndPointsConfig(items) }, properties)));
        case 'CategoryGrid':
            return React.createElement(StyledCategoryGrid, Object.assign({}, properties, { list: items }));
        default: {
            const ComponentForWidget = ComponentLibrary[widget.componentName];
            // console.log('[widget.componentName]', widget.componentName)
            if (ComponentForWidget !== undefined) {
                // this is for widget properties with item facets - components
                if (items !== undefined && items.length > 0) {
                    return React.createElement(ComponentForWidget, Object.assign({}, properties, { list: items }));
                }
                else {
                    // this is only for widget properties - components
                    return React.createElement(ComponentForWidget, Object.assign({}, properties));
                }
            }
            else {
                return 'Default return - No Component defined';
            }
        }
    }
};
export { renderStudioWidget };
//# sourceMappingURL=renderProps.js.map