function addClass(el,className){
    if (el.classList)
      el.classList.add(className);
    else
      el.className += ' ' + className;
}
function removeClass(el,className){
    if (el.classList)
      el.classList.remove(className);
    else
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
function toggleClass(el,className) {
    if (el.classList) {
      el.classList.toggle(className);
    } else {
      var classes = el.className.split(' ');
      var existingIndex = classes.indexOf(className);

      if (existingIndex >= 0)
        classes.splice(existingIndex, 1);
      else
        classes.push(className);

      el.className = classes.join(' ');
    }
}
function hasClass(el,className) {
    return new RegExp('(\\s|^)'+className+'(\\s|$)').test(el.className);
}
function getScrollTop() {
    return window.scrollY || document.documentElement.scrollTop;
}
function scrollShouldAjaxLoad(el, offset, preset) {
    offset = offset || 100;
    preset = preset || false;
    if(!el) {
        return false;
    }
    try {
        var windowHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
        var r = el.getBoundingClientRect();
        if(el.offsetHeight + r.top - offset < windowHeight) {
            if(preset) {
                if(el.offsetHeight + r.top + preset > windowHeight) {
                    return true;
                }
                return false;
            }
            return true;
        }
        return false;
    } catch(e) {
        return false;
    }
}

var smoothScroll = {
    documentVerticalScrollPosition: function(){
        if(self.pageYOffset) return self.pageYOffset;
        if(document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop;
        if(document.body.scrollTop) return document.body.scrollTop;
        return 0;
    },
    viewportHeight: function(){
        return (document.compatMode === "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight;
    },
    documentHeight: function(){
        return (document.height !== undefined) ? document.height : document.body.offsetHeight;
    },
    documentMaximumScrollPosition: function(){
        return this.documentHeight() - this.viewportHeight();
    },
    elementVerticalClientPosition: function(element){
        var rectangle = element.getBoundingClientRect();
        return rectangle.top;
    },
    verticalTickToPosition: function(currentPosition, targetPosition){
        var filter = 0.2;
        var fps = 60;
        var difference = parseFloat(targetPosition) - parseFloat(currentPosition);
        var arrived = (Math.abs(difference) <= 0.5);
        if(arrived){
            scrollTo(0.0, targetPosition);
            return;
        }
        currentPosition = (parseFloat(currentPosition) * (1.0 - filter)) + (parseFloat(targetPosition) * filter);
        scrollTo(0.0, Math.round(currentPosition));
        var self = this;
        setTimeout(function(){
            self.verticalTickToPosition(currentPosition, targetPosition);
        }, (1000 / fps));
    },
    toElement: function(element, padding){
        if(!element){
            console.warn("Couldn't find target element.");
            return;
        }
        var targetPosition = this.documentVerticalScrollPosition() + this.elementVerticalClientPosition(element) - padding;
        var currentPosition = this.documentVerticalScrollPosition();
        var maximumScrollPosition = this.documentMaximumScrollPosition();
        if(targetPosition > maximumScrollPosition) targetPosition = maximumScrollPosition;
        this.verticalTickToPosition(currentPosition, targetPosition);
    }
};
function Cookie(name, defaultValue, path) {
    this.name = name;
    this.value = null;
    this.path = path || "/";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while(c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if(c.indexOf(this.name+"=") === 0) {
            this.value = c.substring((this.name+"=").length, c.length);
            break;
        }
    }
    if(this.value === null) this.value = defaultValue;
    this.set_value = function(value, expire) {
        expire = expire || 315360000;
        expire *= 1000;
        var d = new Date();
        d.setTime(d.getTime()+expire);
        var expires = "expires="+d.toUTCString();
        document.cookie = this.name+"="+value+";"+expires+";path="+this.path;
        this.value = value.toString();
        return true;
    };
    this.destroy = function() {
        document.cookie = this.name+'=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    }
}

var body = document.getElementsByTagName("body")[0];

var $navbar = {
    active: false,
    navbar: document.getElementById("navbar"),
    bg: document.getElementById("navbar-background"),
    burger: document.getElementById("navbar-hamburger"),
    items: document.getElementById("navbar-items"),
    open: function() {
        this.active = true;
        addClass(this.navbar, "active");
        removeClass(this.bg, "fading-out");
        addClass(this.bg, "fading-in");
    },
    close: function() {
        this.active = false;
        removeClass(this.navbar, "active");
        removeClass(this.bg, "fading-in");
        addClass(this.bg, "fading-out");
        var si = document.querySelectorAll("[data-subitems]");
        for(var i=0; i<si.length; i++) {
            removeClass(si[i], "active");
        }
    },
    toggle: function() {
        if(this.active) {
            this.close();
        } else {
            this.open();
        }
    }
};

$navbar.burger.onclick = function(){
    $navbar.toggle();
};
$navbar.bg.onclick = function(){
    $navbar.close();
}
$navbar.items.onclick = function(e){
    if(e.target == e.currentTarget) $navbar.close();
}

document.addEventListener("scroll", function(){
    docOnScroll()
});
docOnScroll();

function docOnScroll() {
    if(getScrollTop() > 120) {
        addClass(body, "shrink");
    } else {
        removeClass(body, "shrink");
    }
}



const NavbarSearchItem_Product = props => {
    const {
        data: p,
        active,
        highlightIndex,
        onMouseEnter,
    } = props;

    return <a
        className="navSearch__input__results__product navSearch__result"
        href={p.link}
        data-css-active={active}
        data-js-hlindex={highlightIndex}
        onMouseEnter={onMouseEnter}
    >
        <img
            className="navSearch__input__results__product__image"
            src={p.image}
            alt={p.title}
        />
        <div className="navSearch__input__results__product__content">
            <div className="navSearch__input__results__product__content__title">{p.title}</div>
            <div className="navSearch__input__results__product__content__price">{p.price} Kč</div>
        </div>
    </a>
};

const NavbarSearchItem_Generic = props => {
    const {
        data: r,
        active,
        highlightIndex,
        onMouseEnter,
    } = props;
    return <a
        className="navSearch__input__results__row navSearch__result"
        href={r.link}
        data-css-active={active}
        data-js-hlindex={highlightIndex}
        onMouseEnter={onMouseEnter}
    >
        {r.title}
    </a>
};

const NavbarSearchItem_Post = props => {
    const {
        data: p,
        active,
        highlightIndex,
        onMouseEnter,
    } = props;
    return <a
        className="navSearch__input__results__post navSearch__result"
        href={p.link}
        data-css-active={active}
        data-js-hlindex={highlightIndex}
        onMouseEnter={onMouseEnter}
        title={p.title}
    >
        <img
            className="navSearch__input__results__post__image"
            src={p.image}
            alt={p.title}
        />
        <div className="navSearch__input__results__post__title">{p.title}</div>
    </a>
}

class NavbarSearch extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: "",
            opened: false,
            nodes: [],
            highlighted: -1,
            preloading: false,
            used: false,
        };
        this.loading = false;
        this.blurTimeout = undefined;
        this.searchTimeout = undefined;
        this.rowTypes = [
            {
                type: "ranking",
                title: __navSearchLang.acZebricky,
                component: NavbarSearchItem_Post,
            },
            {
                type: "review",
                title: __navSearchLang.acRecenze,
                component: NavbarSearchItem_Post,
            },
            {
                type: "blogPost",
                title: __navSearchLang.acClanky,
                component: NavbarSearchItem_Post,
            },
            {
                type: "product",
                title: __navSearchLang.acProdukty,
                component: NavbarSearchItem_Product,
            },
            {
                type: "category",
                title: __navSearchLang.acKategorieProduktu,
                component: NavbarSearchItem_Generic,
            },
            {
                type: "brand",
                title: __navSearchLang.acVyrobci,
                component: NavbarSearchItem_Generic,
            },
        ];

        this._open = this.open.bind(this);
        this._close = this.close.bind(this);
        this._toggleOpen = this.toggleOpen.bind(this);
        this._search = this.search.bind(this);
        this._onChange = this.onChange.bind(this);
        this._onBlur = this.onBlur.bind(this);
        this._onFocus = this.onFocus.bind(this);
        this._onMouseEnter = this.onMouseEnter.bind(this);
        this._onKeyDown = this.onKeyDown.bind(this);
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        if(!prevState.opened && this.state.opened) {
            const input = this.refs.input;
            input.focus()
            input.select()
        }
    }
    open() {
        this.setState({
            opened: true,
        })
        this.props.onToggle?.(true)
    }
    close() {
        this.setState({
            opened: false,
        })
        this.props.onToggle?.(false)
    }
    toggleOpen() {
        if(this.state.opened) {
            this.close()
        } else {
            this.open()
        }
    }
    async search() {
        if(this.loading) return;
        this.loading = true;
        const nextState = {};
        try {
            const fd = new FormData();
            fd.append("request", "index/search")
            fd.append("query", this.state.value)
            fd.append("all", "1")
            const r = await fetch(`${__httppath}/ajax/`, {
                method: "POST",
                body: fd,
            });
            const e = await r.json();
            if(e.status == "OK") {
                nextState.nodes = e.data.nodes;
                nextState.highlighted = -1;
                nextState.used = true;
            } else {
                console.error(e)
            }
        } catch(err) {
            console.error(err)
        } finally {
            nextState.preloading = false;
            this.setState(nextState)
            this.loading = false;
        }
    }
    onChange(ev) {
        const val = ev.currentTarget.value;
        const isSearchable = val.length >= 3;
        this.setState({
            value: val,
            preloading: isSearchable,
        }, () => {
            if(isSearchable) {
                clearTimeout(this.searchTimeout)
                this.searchTimeout = setTimeout(this._search, 750);
            }
        })
    }
    onBlur() {
        clearTimeout(this.blurTimeout)
        this.blurTimeout = setTimeout(this._close, 300);
    }
    onFocus() {
        clearTimeout(this.blurTimeout)
    }
    onMouseEnter(ev) {
        const hlindex = parseInt(ev.currentTarget.dataset.jsHlindex);
        this.setState({
            highlighted: hlindex,
        })
    }
    onKeyDown(ev) {
        switch(ev.key) {
            case "ArrowDown": {
                ev.preventDefault()
                const nodeCount = this.state.nodes.length;
                let next = this.state.highlighted + 1;
                if(next > nodeCount - 1) next = -1;
                this.setState({
                    highlighted: next,
                })
            }
            break;
            case "ArrowUp": {
                ev.preventDefault()
                const nodeCount = this.state.nodes.length;
                let next = this.state.highlighted - 1;
                if(next < -1) next = nodeCount - 1;
                this.setState({
                    highlighted: next,
                })
            }
            break;
            case "Enter":
                const hl = this.state.highlighted;
                if(hl > -1 && this.state.nodes[hl] !== undefined) {
                    window.location.href = this.state.nodes[hl].link;
                } else {
                    window.location.href = `${__httppath}/hledat/?q=${encodeURIComponent(this.state.value)}`;
                }
            break;
            case "Escape":
                this.refs.input.blur()
            break;
        }
    }
    render() {
        let hlIterator = -1;
        let results;
        const {
            nodes,
            highlighted,
            preloading,
            used,
            opened,
            value,
        } = this.state;

        if(used && opened) {
            const segments = [];
            for(const t of this.rowTypes) {
                const results = nodes.filter(e => e.type == t.type);
                if(results.length == 0) continue;
                segments.push(
                    <div key={t.type}>
                        <div className="navSearch__input__results__header">{t.title}</div>
                        {results.map(r => {
                            hlIterator++;
                            return React.createElement(t.component, {
                                key: r.id,
                                data: r,
                                active: highlighted == hlIterator,
                                highlightIndex: hlIterator,
                                onMouseEnter: this._onMouseEnter,
                            })
                        })}
                    </div>
                )
            }
            results = (
                <div className="navSearch__input__results">
                    <div className="navSearch__input__results__scroll">
                        {segments}
                        <a
                            className="navSearch__input__results__more navSearch__result"
                            href={`${__httppath}/hledat/?q=${encodeURIComponent(value)}`}
                            data-css-active={highlighted == -1}
                            data-js-hlindex={-1}
                            onMouseEnter={this._onMouseEnter}
                        >
                            {nodes.length > 0 ? __navSearchLang.acVsechnyVysledky : __navSearchLang.acZadneVysledky}
                        </a>
                    </div>
                </div>
            );
        }

        return <div className="navSearch">
            <div className="navSearch__input" data-css-opened={opened}>
                <input
                    type="text"
                    className="navSearch__input__field"
                    value={value}
                    onChange={this._onChange}
                    onBlur={this._onBlur}
                    onFocus={this._onFocus}
                    onKeyDown={this._onKeyDown}
                    placeholder={__navSearchLang.searchPlaceholder}
                    aria-label={__navSearchLang.ariaZadejteFrazi}
                    ref="input"
                />
                {preloading &&
                    <div className="navSearch__input__loading">
                        <i className="fas fa-circle-notch fa-spin" />
                    </div>
                }
                {results}
            </div>
            <button
                type="button"
                className="btn navSearch__mg"
                onClick={this._toggleOpen}
            >
                <i className="fas fa-search" />
            </button>
        </div>
    }
}
const onNavbarSearchToggle = opened => {
    if(opened) {
        $navbar.navbar.classList.add("search-active")
    } else {
        $navbar.navbar.classList.remove("search-active")
    }
};
ReactDOM.render(<NavbarSearch onToggle={onNavbarSearchToggle} />, document.getElementById("navbar-search"))



var siTriggers = document.querySelectorAll("[data-subitems-trigger]");
var siCloses = document.querySelectorAll("[data-subitems-close]");
for(var i=0; i<siTriggers.length; i++) {
    (function(i){
        siTriggers[i].addEventListener("click",function(){
            try {
                addClass(document.querySelector("[data-subitems="+siTriggers[i].getAttribute("data-subitems-trigger")+"]"), "active");
            } catch(e) {}
        });
        siCloses[i].addEventListener("click",function(){
            try {
                removeClass(document.querySelector("[data-subitems="+siTriggers[i].getAttribute("data-subitems-trigger")+"]"), "active");
            } catch(e) {}
        })
    })(i);
}
siTriggers.forEach(trigger => {
    if(trigger.hasAttribute("href")) {
        trigger.addEventListener("click", (ev) => {
            if(window.innerWidth < 768) {
                ev.preventDefault()
            }
        })
    }
})

var trackedProducts = document.querySelectorAll("a[data-tr-product]");
for(var i=0; i<trackedProducts.length; i++) {
    (function(i){
        var t = trackedProducts[i];
        t.addEventListener("click",function(){
            if(t.getAttribute("data-tr-from") != "x") {
                gtag("event", "click", {
                    event_category: t.getAttribute("data-tr-from"),
                    event_action: t.getAttribute("data-tr-product"),
                    event_label: t.getAttribute("data-tr-shop")
                })
                //console.log(t.getAttribute("data-tr-product")+"\n"+t.getAttribute("data-tr-shop")+"\n"+t.getAttribute("data-tr-from")+"\n"+"--------");
            }
        });
    })(i);
}

var CookieConfirm = React.createClass({
    getDefaultProps() {
        return {
            lang: {}
        };
    },
    getInitialState() {
        return {
            active: true
        };
    },
    handleAction(type, data) {
        switch(type) {
            case "confirm":
                $SHOWCOOKIECONFIRM.set_value("0");
                this.setState({
                    active: false
                });
            break;
        }
    },
    render() {
        return (
            <section className={"cookie-confirm"+(this.state.active ? " active" : "")}>
                <div dangerouslySetInnerHTML={{__html: this.props.lang.text}} />
                <div>
                    <button type="button" className="btn btn-fancy-green a-little-cuter" onClick={this.handleAction.bind(null, "confirm")}>{this.props.lang.confirm}</button>
                </div>
            </section>
        );
    }
});

var $SHOWCOOKIECONFIRM = new Cookie("_ccf", "1");
if($SHOWCOOKIECONFIRM.value === "1") {
    ReactDOM.render(<CookieConfirm lang={__cookieConfirm.lang} />, document.getElementById("cookie-confirm"));
}