"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("@builder.io/react");
var react_2 = require("react");
var isArray_1 = require("lodash-es/isArray");
var last_1 = require("lodash-es/last");
var react_slick_1 = require("react-slick");
var defaultElement = {
    '@type': '@builder.io/sdk:Element',
    responsiveStyles: {
        large: {
            // TODO: always apply these if not given
            position: 'relative',
            display: 'flex',
            alignItems: 'stretch',
            flexDirection: 'column',
            height: '400px'
        }
    },
    children: [
        {
            '@type': '@builder.io/sdk:Element',
            responsiveStyles: {
                large: {
                    marginTop: '50px',
                    textAlign: 'center',
                    display: 'flex',
                    flexDirection: 'column'
                }
            },
            component: {
                name: 'Text',
                options: {
                    text: 'I am a slide'
                }
            }
        }
    ]
};
var defaultButton = {
    '@type': '@builder.io/sdk:Element',
    responsiveStyles: {
        large: {
            position: 'relative',
            display: 'flex',
            alignItems: 'stretch',
            flexDirection: 'column',
            height: '30px'
        }
    }
};
// TODO: change to slick grid
var BuilderCarouselComponent = /** @class */ (function (_super) {
    __extends(BuilderCarouselComponent, _super);
    function BuilderCarouselComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.divRef = null;
        _this.sliderRef = null;
        return _this;
    }
    BuilderCarouselComponent.prototype.componentDidMount = function () {
        var _this = this;
        setTimeout(function () {
            if (_this.divRef) {
                _this.divRef.dispatchEvent(new CustomEvent('builder:carousel:load', {
                    bubbles: true,
                    cancelable: false,
                    detail: {
                        block: _this.props.builderBlock,
                        carousel: _this.sliderRef
                    }
                }));
            }
        });
    };
    BuilderCarouselComponent.prototype.render = function () {
        var _this = this;
        var slides = this.props.slides;
        if (slides && !react_1.Builder.isBrowser) {
            slides = slides.slice(0, 1);
        }
        return (react_2.default.createElement(react_1.BuilderAsyncRequestsContext.Consumer, null, function (value) {
            _this._errors = value && value.errors;
            _this._logs = value && value.logs;
            return (react_2.default.createElement(react_1.BuilderStoreContext.Consumer, null, function (state) { return (react_2.default.createElement("div", { ref: function (ref) { return (_this.divRef = ref); }, className: "builder-carousel" },
                react_1.Builder.isServer ? (react_2.default.createElement("style", { type: "text/css", dangerouslySetInnerHTML: { __html: slickStyles } })) : (react_2.default.createElement("style", { type: "text/css" }, slickStyles)),
                react_2.default.createElement(react_slick_1.default, __assign({ responsive: _this.props.responsive, ref: function (ref) { return (_this.sliderRef = ref); }, afterChange: function (slide) {
                        // TODO; callbacks
                        if (_this.divRef) {
                            _this.divRef.dispatchEvent(new CustomEvent('builder:carousel:change', {
                                bubbles: true,
                                cancelable: false,
                                detail: {
                                    slide: slide,
                                    block: _this.props.builderBlock,
                                    carousel: _this.sliderRef
                                }
                            }));
                        }
                    }, autoplay: _this.props.autoplay, autoplaySpeed: _this.props.autoplaySpeed
                        ? _this.props.autoplaySpeed * 1000
                        : undefined, dots: !_this.props.hideDots, 
                    // TODO: on change emit event on element?
                    // renderBottomCenterControls={this.props.hideDots ? () => null : undefined}
                    // OOF!!
                    nextArrow: react_2.default.createElement("div", null,
                        react_2.default.createElement(react_1.BuilderBlocks, { parentElementId: _this.props.builderBlock.id, dataPath: "component.options.prevButton", blocks: _this.props.prevButton })), 
                    // OOF!!
                    prevArrow: react_2.default.createElement("div", null,
                        react_2.default.createElement(react_1.BuilderBlocks, { parentElementId: _this.props.builderBlock.id, dataPath: "component.options.nextButton", blocks: _this.props.nextButton })) }, _this.props.slickProps), _this.props.useChildrenForSlides
                    ? _this.props.builderBlock &&
                        _this.props.builderBlock.children &&
                        _this.props.builderBlock.children.map(function (block, index) {
                            if (block.repeat && block.repeat.collection) {
                                var collectionPath = block.repeat.collection;
                                var collectionName = last_1.default((collectionPath || '')
                                    .split(/\.\w+\(/)[0]
                                    .trim()
                                    .split('.'));
                                var itemName_1 = block.repeat.itemName ||
                                    (collectionName
                                        ? collectionName + 'Item'
                                        : 'item');
                                var array = react_1.stringToFunction(collectionPath, true, _this._errors, _this._logs)(state.state);
                                if (isArray_1.default(array)) {
                                    if (!react_1.Builder.isBrowser) {
                                        array = array.slice(0, 1);
                                    }
                                    return array.map(function (data, index) {
                                        var _a;
                                        // TODO: Builder state produce the data
                                        var childState = __assign(__assign({}, state.state), (_a = { $index: index, $item: data }, _a[itemName_1] = data, _a));
                                        return (react_2.default.createElement(react_1.BuilderStoreContext.Provider, { key: block.id, value: __assign(__assign({}, state), { state: childState }) },
                                            react_2.default.createElement(react_1.BuilderBlockComponent, { block: __assign(__assign({}, block), { repeat: null }), index: index, child: true })));
                                    });
                                }
                            }
                            return (react_2.default.createElement(react_1.BuilderBlockComponent, { key: block.id, block: block, index: index, child: true }));
                        })
                    : _this.props.slides &&
                        _this.props.slides.map(function (slide, index) { return (
                        // TODO: how make react compatible with plain react components
                        // slides: <Foo><Bar> <- builder blocks if passed react nodes as blocks just forward them
                        react_2.default.createElement(react_1.BuilderBlocks, { key: index, parentElementId: _this.props.builderBlock &&
                                _this.props.builderBlock.id, dataPath: "component.options.slides." + index + ".content", child: true, blocks: slide.content || slide })); })))); }));
        }));
    };
    return BuilderCarouselComponent;
}(react_2.default.Component));
var slickStyles = "@charset 'UTF-8';\n  .slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-slide{display:none;float:left;height:auto;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}\n  .slick-dots,.slick-next,.slick-prev{position:absolute;display:block;padding:0}.slick-dots li button:before,.slick-next:before,.slick-prev:before{font-family:slick;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.slick-loading .slick-list{background:url(ajax-loader.gif) center center no-repeat #fff}@font-face{font-display:swap;font-family:slick;font-weight:400;font-style:normal;src:url(https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/fonts/slick.eot);src:local(\"slick\"),url(https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/fonts/slick.eot?#iefix) format('embedded-opentype'),url(https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/fonts/slick.woff) format('woff'),url(https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/fonts/slick.ttf) format('truetype'),url(https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/fonts/slick.svg#slick) format('svg')}.slick-next,.slick-prev{font-size:0;line-height:0;top:50%;width:20px;height:20px;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color:transparent;border:none;outline:0;background:0 0}.slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:0 0}.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}.slick-next:before,.slick-prev:before{font-size:20px;line-height:1;opacity:.75;color:#fff}.slick-prev{left:-25px}[dir=rtl] .slick-prev{right:-25px;left:auto}.slick-prev:before{content:''}.slick-next:before,[dir=rtl] .slick-prev:before{content:''}.slick-next{right:-25px}[dir=rtl] .slick-next{right:auto;left:-25px}[dir=rtl] .slick-next:before{content:'\u2022\u0090'}.slick-dotted.slick-slider{margin-bottom:30px}.slick-dots{bottom:-25px;width:100%;margin:0;list-style:none;text-align:center}.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;margin:0 5px;padding:0;cursor:pointer}.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}.slick-dots li button:focus,.slick-dots li button:hover{outline:0}.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}.slick-dots li button:before{font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'\u2022';text-align:center;opacity:.25;color:#000}.slick-dots li.slick-active button:before{opacity:.75;color:#000}\n";
exports.BuilderCarousel = react_1.withBuilder(BuilderCarouselComponent, {
    name: 'Builder:Carousel',
    // TODO: default children
    canHaveChildren: true,
    defaultStyles: {
        paddingLeft: '30px',
        paddingRight: '30px',
        paddingBottom: '30px'
    },
    inputs: [
        {
            name: 'slides',
            type: 'list',
            subFields: [
                {
                    name: 'content',
                    type: 'uiBlocks',
                    hideFromUI: true,
                    defaultValue: [defaultElement]
                }
            ],
            defaultValue: [
                {
                    content: [defaultElement]
                },
                {
                    content: [defaultElement]
                }
            ],
            // showIf: options => !options.get('useChildrenForSlides'),
            showIf: function (options) { return !options.get('useChildrenForSlides'); }
        },
        {
            name: 'hideDots',
            helperText: 'Show pagination dots',
            type: 'boolean',
            defaultValue: false
        },
        {
            name: 'autoplay',
            helperText: 'Automatically rotate to the next slide every few seconds',
            type: 'boolean',
            defaultValue: false
        },
        {
            name: 'autoplaySpeed',
            type: 'number',
            defaultValue: 5,
            helperText: 'If auto play is on, how many seconds to wait before automatically changing each slide',
            // TODO: showIf option
            // showIf: options => options.get('autoplay'),
            // TODO: why fn not working?
            showIf: function (options) { return options.get('autoplay'); }
            // showIf: (options) => options.get('autoPlay')
        },
        // TODO: on add new duplicate the prior or expect use templates
        // onChange:
        {
            name: 'prevButton',
            type: 'uiBlocks',
            hideFromUI: true,
            defaultValue: [
                __assign(__assign({}, defaultButton), { component: {
                        name: 'Image',
                        options: {
                            image: 'https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Fd909a5b91650499c9e0524cc904eeb77'
                        }
                    } })
            ]
        },
        {
            name: 'nextButton',
            type: 'uiBlocks',
            hideFromUI: true,
            defaultValue: [
                __assign(__assign({}, defaultButton), { component: {
                        name: 'Image',
                        options: {
                            image: 'https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2Fdb2a9827561249aea3817b539aacdcdc'
                        }
                    } })
            ]
        },
        {
            name: 'useChildrenForSlides',
            type: 'boolean',
            helperText: 'Use child elements for each slide, instead of the array. Useful for dynamically repeating slides',
            advanced: true,
            defaultValue: false,
            onChange: function (options) {
                if (options.get('useChildrenForSlides') === true) {
                    options.set('slides', []);
                }
            }
        },
        {
            name: 'responsive',
            type: 'array',
            helperText: 'Responsive settings - e.g. see https://kenwheeler.github.io/slick/',
            advanced: true,
            defaultValue: [
                {
                    width: 3000,
                    slidesToShow: 2,
                    slidesToScroll: 2
                },
                {
                    width: 400,
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            ],
            subFields: [
                {
                    name: 'breakpoint',
                    type: 'number',
                    defaultValue: 400,
                    required: true
                },
                {
                    name: 'settings',
                    type: 'object',
                    defaultValue: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    },
                    subFields: [
                        {
                            name: 'slidesToShow',
                            type: 'number',
                            defaultValue: 2
                        },
                        {
                            name: 'slidesToScroll',
                            type: 'number',
                            defaultValue: 2
                        },
                        {
                            name: 'infinite',
                            type: 'boolean',
                            defaultValue: true
                        },
                        {
                            name: 'dots',
                            type: 'boolean',
                            defaultValue: true
                        }
                    ]
                }
            ]
        }
    ]
});
//# sourceMappingURL=Carousel.js.map