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;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { convertToAMPM } from 'src/lib/common/helpers';
import css from '../ProfilePage.module.scss';
import { _cx } from 'src/utility/class';
import Detail from '../DocDetails/Detail';
import Modal from 'src/components/Modal/ModalModule';
import Video from 'src/components/Video/Video';
import { useAppSelector } from 'src/app/redux/store';
import TiffViewer from 'src/components/TiffViewer/TiffViewer';
var cx = _cx(css);
var NoImageTag = function (_a) {
    var _b = _a.isForModal, isForModal = _b === void 0 ? false : _b;
    var noImageUrl = 'https://images.ctfassets.net/vh25xg5i1h5l/6OcSP89JGsg0nxETk6uvIB/675d8add7e4ad6fc5701b1cb1cd421ea/Image_Placeholder__1_.png';
    return (_jsx("div", { className: cx('no-image', isForModal && 'modal_img'), children: _jsx("img", { src: noImageUrl, className: cx('no-img') }) }));
};
export default function Offices(_a) {
    var _b, _c, _d, _e, _f, _g, _h, _j;
    var t = _a.t, isMobile = _a.isMobile, offices = _a.offices, daysOfWeek = _a.daysOfWeek, data = _a.data;
    var _k = __read(useState(), 2), location = _k[0], setLocation = _k[1];
    var useDocLoc3O = useAppSelector(function (state) { return state.config.config; }).useDocLoc3O;
    var _l = __read(useState([]), 2), officesData = _l[0], setOfficesData = _l[1];
    var daysOfWeek_3_O = __spreadArray([daysOfWeek[6]], __read(daysOfWeek.slice(0, 6)), false);
    var _m = __read(useState(false), 2), showOfficePhotosModal = _m[0], setShowOfficePhotosModal = _m[1];
    var _o = __read(useState(), 2), modalCurrentImage = _o[0], setModalCurrentImage = _o[1];
    useEffect(function () {
        var updatedOffices = offices.filter(function (item) {
            return item.location_id !== data.location_id;
        });
        var found = offices.find(function (item) { return item.location_id === data.location_id; });
        if (found) {
            updatedOffices = __spreadArray([found], __read(updatedOffices), false);
            setOfficesData(updatedOffices);
            setLocation(updatedOffices[0]);
        }
        else {
            setOfficesData(offices);
            setLocation(offices[0]);
        }
    }, [offices]);
    return (_jsxs(_Fragment, { children: [_jsx(Detail, { isMobile: isMobile, label: t.office_location, id: "office_location", children: _jsx("div", { className: cx('offices', { isMobile: isMobile }), children: _jsx("div", { className: cx('location-card-container'), children: officesData.map(function (office, i) {
                            var address = office.address;
                            return (_jsxs("div", { className: cx('location-card', {
                                    active: office.location_id === (location === null || location === void 0 ? void 0 : location.location_id),
                                }), onClick: function () {
                                    setLocation(office);
                                }, children: [useDocLoc3O && _jsx("span", { children: office.preferred_name }), _jsx("p", { children: address })] }, "".concat(address, "-").concat(i)));
                        }) }) }) }), !useDocLoc3O && location && location.office_hours && (_jsx(Detail, { isMobile: isMobile, label: t.doctor_office_hours, id: "doctor_office_hours", children: _jsxs("ul", { className: cx('office-days details-list'), children: [_jsxs("li", { children: [_jsx("span", { className: cx('dayn'), children: t[daysOfWeek[6]] }), "".concat(Boolean((_b = location.office_hours[0]) === null || _b === void 0 ? void 0 : _b.closed)
                                    ? "".concat(t.doctor_closed)
                                    : "".concat((_c = location.office_hours[0]) === null || _c === void 0 ? void 0 : _c.from, " - ").concat((_d = location.office_hours[0]) === null || _d === void 0 ? void 0 : _d.to, " AM"))] }), location.office_hours.slice(1, 7).map(function (officeDay, i) {
                            var _a;
                            var day = (_a = t[daysOfWeek[i]]) !== null && _a !== void 0 ? _a : "Day ".concat(i + 1);
                            var isClosed = !!+officeDay.closed;
                            return (_jsxs("li", { children: [_jsx("span", { className: cx('dayn'), children: day }), "".concat(isClosed
                                        ? "".concat(t.doctor_closed)
                                        : "".concat(convertToAMPM(officeDay.from), " - ").concat(convertToAMPM(officeDay.to)))] }, "".concat(day, "-officeHour")));
                        })] }) })), useDocLoc3O && (_jsxs(_Fragment, { children: [_jsxs("div", { className: cx('office_photo_hours'), style: { gap: !(location === null || location === void 0 ? void 0 : location.multiple_office_photos) ? 0 : 20 }, children: [isMobile ? (_jsx(Detail, { isMobile: isMobile, label: t.doctor_office_photos, id: "doctor_office_photos", children: location && ((_e = location === null || location === void 0 ? void 0 : location.multiple_office_photos) === null || _e === void 0 ? void 0 : _e.length) > 0 ? (_jsxs("div", { className: cx('photo_container'), onClick: function () {
                                        setModalCurrentImage(location === null || location === void 0 ? void 0 : location.multiple_office_photos[0]);
                                        setShowOfficePhotosModal(true);
                                    }, children: [_jsx("div", { className: cx('main_photo'), children: _jsx(TiffViewer, { src: location.multiple_office_photos[0] || '' }) }), _jsx("div", { className: cx('photo_container_slide'), children: (_f = [1, 2, 3]) === null || _f === void 0 ? void 0 : _f.map(function (item, i) {
                                                var photo = location === null || location === void 0 ? void 0 : location.multiple_office_photos[item];
                                                if (photo) {
                                                    return _jsx(TiffViewer, { src: photo });
                                                }
                                                else {
                                                    return _jsx(NoImageTag, {}, i);
                                                }
                                            }) })] })) : (_jsx("span", { className: cx('text-small'), children: t.not_provided })) })) : location && ((_g = location === null || location === void 0 ? void 0 : location.multiple_office_photos) === null || _g === void 0 ? void 0 : _g.length) > 0 ? (_jsx(Detail, { isMobile: isMobile, label: t.doctor_office_photos, id: "doctor_office_photos", children: _jsxs("div", { className: cx('photo_container'), onClick: function () {
                                        setModalCurrentImage(location === null || location === void 0 ? void 0 : location.multiple_office_photos[0]);
                                        setShowOfficePhotosModal(true);
                                    }, children: [_jsx("div", { className: cx('main_photo'), children: _jsx(TiffViewer, { src: location.multiple_office_photos[0] || '' }) }), _jsx("div", { className: cx('photo_container_slide'), children: (_h = [1, 2, 3]) === null || _h === void 0 ? void 0 : _h.map(function (item, i) {
                                                var photo = location === null || location === void 0 ? void 0 : location.multiple_office_photos[item];
                                                if (photo) {
                                                    return _jsx(TiffViewer, { src: photo });
                                                }
                                                else {
                                                    return _jsx(NoImageTag, {}, i);
                                                }
                                            }) })] }) })) : (_jsx("div", { children: _jsx(Detail, { isMobile: isMobile, label: t.doctor_office_photos, id: "doctor_office_photos", children: _jsx("span", { className: cx('text-small'), children: t.not_provided }) }) })), _jsx(Detail, { isMobile: isMobile, label: t.doctor_office_hours, id: "doctor_office_hours", children: location && location.office_hours ? (_jsx("ul", { className: cx('office-days details-list'), children: location.office_hours.map(function (officeDay, i) {
                                        var _a;
                                        var day = (_a = t[daysOfWeek_3_O[i]]) !== null && _a !== void 0 ? _a : "Day ".concat(i + 1);
                                        var isClosed = !!+officeDay.closed;
                                        return (_jsxs("li", { children: [_jsx("span", { className: cx('dayn'), children: day }), "".concat(isClosed
                                                    ? "".concat(t.doctor_closed)
                                                    : "".concat(officeDay.from ? convertToAMPM(officeDay.from) : '-', " - ").concat(officeDay.to ? convertToAMPM(officeDay.to) : '-'))] }, "".concat(day, "-officeHour")));
                                    }) })) : (_jsx("span", { className: cx('text-small'), children: t.not_provided })) })] }), _jsx("div", { className: cx('offices-details'), children: _jsx(Detail, { isMobile: isMobile, label: t.video_title, id: "video", children: location && location.office_video ? (_jsx(Video, { src: location.office_video })) : (_jsx("span", { className: cx('text-small'), children: t.not_provided })) }) }), showOfficePhotosModal && (_jsx(Modal, { setShowModal: function () { return setShowOfficePhotosModal(false); }, size: "lg", closeButton: true, children: _jsxs("div", { className: cx('photo_container', 'photo_container_cursor'), children: [_jsx("div", { className: cx('main_photo'), children: _jsx(TiffViewer, { src: modalCurrentImage || '' }) }), _jsx("div", { className: cx('photo_container_slide', 'photo_container_slide_modal'), children: (_j = [0, 1, 2, 3]) === null || _j === void 0 ? void 0 : _j.map(function (item, i) {
                                        var photo = location === null || location === void 0 ? void 0 : location.multiple_office_photos[item];
                                        if (photo) {
                                            return (_jsx("div", { className: cx('modal_img', photo === modalCurrentImage && 'active'), onClick: function () {
                                                    setModalCurrentImage(photo);
                                                }, children: _jsx(TiffViewer, { src: photo }) }, "modal_img-".concat(i)));
                                        }
                                        else {
                                            return _jsx(NoImageTag, { isForModal: true }, i);
                                        }
                                    }) })] }) }))] }))] }));
}
