var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
import { jsx as _jsx } from "react/jsx-runtime";
import { useState, useEffect, useRef, useMemo } from 'react';
import css from './ProfilePage.module.scss';
import { _cx } from 'src/utility/class';
import { useAppSelector } from 'src/app/redux/store';
var cx = _cx(css);
var AnchorBar = function (_a) {
    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
    var t = _a.t, data = _a.data, selectedDsoId = _a.selectedDsoId;
    var _m = __read(useState('treatments_offered'), 2), activeSection = _m[0], setActiveSection = _m[1];
    var _o = __read(useState(false), 2), clicked = _o[0], isClicked = _o[1];
    var itemsEls = useRef(new Array());
    var useDocLoc3O = useAppSelector(function (state) { return state.config.config; }).useDocLoc3O;
    var educations = useMemo(function () {
        var _a, _b;
        return data.is_dso
            ? (_a = data.dso_practice_info.find(function (info) { return info.location_id === selectedDsoId; })) === null || _a === void 0 ? void 0 : _a.education
            : (_b = data.bio) === null || _b === void 0 ? void 0 : _b.educations;
    }, [data.is_dso, selectedDsoId]);
    var tabItems = useMemo(function () {
        if (useDocLoc3O) {
            return [
                {
                    anchor: 'treatments_offered',
                    label: t.treatments_offered,
                },
                {
                    anchor: 'doctor_detail_payment',
                    label: t.doctor_detail_payment,
                },
                {
                    anchor: 'doctor_detail_insurance',
                    label: t.doctor_detail_insurance,
                },
                {
                    anchor: 'doctor_detail_languages_spoken',
                    label: t.doctor_detail_languages_spoken,
                },
                {
                    anchor: 'doctor_detail_education',
                    label: t.doctor_detail_education,
                },
                {
                    anchor: 'doctor_detail_associations',
                    label: t.doctor_detail_associations,
                },
                {
                    anchor: 'doctor_office_hours',
                    label: t.doctor_office_hours,
                },
                {
                    anchor: 'doctor_office_photos',
                    label: t.doctor_office_photos,
                },
                {
                    anchor: 'video',
                    label: t.video_title,
                },
            ];
        }
        else {
            return [
                {
                    anchor: 'treatments_offered',
                    label: t.treatments_offered,
                },
                {
                    anchor: 'doctor_detail_insurance',
                    label: t.doctor_detail_insurance,
                },
                {
                    anchor: 'doctor_detail_payment',
                    label: t.doctor_detail_payment,
                },
                {
                    anchor: 'doctor_detail_education',
                    label: t.doctor_detail_education,
                },
                {
                    anchor: 'doctor_office_hours',
                    label: t.doctor_office_hours,
                },
            ];
        }
    }, []);
    if (!(educations === null || educations === void 0 ? void 0 : educations.length)) {
        tabItems = tabItems.filter(function (tab) {
            return tab.anchor !== 'doctor_detail_education';
        });
    }
    if (!((_c = (_b = data.bio) === null || _b === void 0 ? void 0 : _b.insurance_types) === null || _c === void 0 ? void 0 : _c.length)) {
        tabItems = tabItems.filter(function (tab) {
            return tab.anchor !== 'doctor_detail_insurance';
        });
    }
    if (!((_e = (_d = data.bio) === null || _d === void 0 ? void 0 : _d.payment_methods) === null || _e === void 0 ? void 0 : _e.length)) {
        tabItems = tabItems.filter(function (tab) {
            return tab.anchor !== 'doctor_detail_payment';
        });
    }
    if (!useDocLoc3O) {
        if (!((_g = (_f = data.bio) === null || _f === void 0 ? void 0 : _f.offices) === null || _g === void 0 ? void 0 : _g.length) ||
            !((_h = data.bio.offices[0]) === null || _h === void 0 ? void 0 : _h.office_hours) ||
            ((_j = data.bio.offices[0]) === null || _j === void 0 ? void 0 : _j.hide_office_hours)) {
            tabItems = tabItems.filter(function (tab) {
                return tab.anchor !== 'doctor_office_hours';
            });
        }
    }
    else {
        if (!((_l = (_k = data.bio) === null || _k === void 0 ? void 0 : _k.languages) === null || _l === void 0 ? void 0 : _l.length)) {
            tabItems = tabItems.filter(function (tab) {
                return tab.anchor !== 'doctor_detail_languages_spoken';
            });
        }
    }
    useEffect(function () {
        var handleScroll = function () {
            var scrollPosition = window.scrollY;
            var sections = document.querySelectorAll('section');
            sections.forEach(function (section) {
                var _a, _b;
                var sectionTop = section.offsetTop;
                var sectionHeight = section.offsetHeight;
                var offsetEl = document.querySelector("#header");
                var offsetNav = offsetEl ? offsetEl.getBoundingClientRect().height + 10 : 0;
                var hiddenNavOffset = offsetEl
                    ? parseInt(((_a = window.getComputedStyle(offsetEl, null).getPropertyValue('top')) === null || _a === void 0 ? void 0 : _a.replace(/\D/g, '')) ||
                        '0', 10)
                    : 0;
                var bodyRect = document.body.getBoundingClientRect().top;
                var elementRect = section.getBoundingClientRect().top;
                var offsetPosition = elementRect - bodyRect - offsetNav;
                if (hiddenNavOffset !== 0)
                    offsetPosition += offsetNav - 20;
                if (scrollPosition >= sectionTop - offsetNav - 50 &&
                    scrollPosition < sectionTop + sectionHeight - offsetNav - 50) {
                    (_b = itemsEls.current[tabItems.findIndex(function (item) { return item.anchor === section.id; })]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
                        behavior: 'instant',
                        block: 'nearest',
                        inline: 'center',
                    });
                    setActiveSection(section.id);
                }
            });
        };
        if (clicked) {
            window.removeEventListener('scroll', handleScroll);
        }
        else {
            window.addEventListener('scroll', handleScroll);
        }
        return function () {
            window.removeEventListener('scroll', handleScroll);
        };
    }, [clicked]);
    var scrollTo = function (el, extraFixedHeight) {
        if (extraFixedHeight === void 0) { extraFixedHeight = 0; }
        var scrollHeight = 0;
        if (el) {
            var rect = el.getBoundingClientRect();
            if (!rect || !rect.top)
                return;
            scrollHeight = rect.top + window.scrollY - extraFixedHeight;
        }
        else if (!el && extraFixedHeight !== 0)
            scrollHeight = extraFixedHeight;
        else
            return;
        window.scrollTo({
            top: scrollHeight,
            left: 0,
            behavior: 'smooth',
        });
        setInterval(function () {
            isClicked(false);
        }, 4000);
    };
    var scrollToAnchor = function (id, extraOffset) {
        isClicked(true);
        if (id)
            setActiveSection(id);
        try {
            setTimeout(function () {
                var anchor = id || window.location.href.split('#')[1];
                if ((anchor === null || anchor === void 0 ? void 0 : anchor.includes('?')) || (anchor === null || anchor === void 0 ? void 0 : anchor.includes('&')) || (anchor === null || anchor === void 0 ? void 0 : anchor.includes(' ')))
                    return;
                var element = !!anchor
                    ? document.querySelector("[data-anchor=\"".concat(anchor, "\"")) ||
                        document.querySelector("[id=\"".concat(anchor, "\""))
                    : null;
                if (!element)
                    return;
                var offsetEl = document.querySelector("#header");
                var offsetNav = offsetEl ? offsetEl.getBoundingClientRect().height + 70 : 0;
                var bodyRect = document.body.getBoundingClientRect().top;
                var elementRect = element.getBoundingClientRect().top;
                var offsetPosition = elementRect - bodyRect - offsetNav;
                if (extraOffset)
                    offsetPosition -= extraOffset;
                scrollTo(undefined, offsetPosition);
            }, 200);
        }
        catch (e) { }
    };
    var header = document.querySelector('#header');
    var navHeight = header ? header.clientHeight : 0;
    return (_jsx("div", { className: cx('anchor-bar'), style: { top: navHeight }, children: tabItems.map(function (tab, idx) {
            var getRef = function (element) { return itemsEls.current.push(element); };
            return (_jsx("div", { className: cx({ active: tab.anchor === activeSection }), onClick: function () {
                    return tab.anchor && scrollToAnchor(tab.anchor.replace('#', ''), useDocLoc3O ? 25 : -30);
                }, ref: getRef, children: tab.label }, idx));
        }) }));
};
export default AnchorBar;
