import { r as registerInstance, h, H as Host } from './index-bcf0d8d6.js';

const photoCarouselCss = "floodteam-photo-carousel{border:1px solid var(--ion-color-base-dark);border-radius:8px;position:relative;display:flex;justify-content:center;align-items:center;margin:0px 10px auto auto;min-width:250px;min-height:200px;margin:0 auto;background:1px solid var(--ion-color-base-dark-tint)}floodteam-photo-carousel ion-slides::after{content:\"\";display:block;height:40px;width:100%;position:absolute;left:0;right:0;top:0;background:transparent;background:linear-gradient(\n    0deg,\n    rgba(0, 0, 0, 0) 10%,\n    rgba(0, 0, 0, 0.3) 80%\n  );border-radius:8px 8px 0 0}floodteam-photo-carousel ion-slide{width:100%;padding-top:75%;position:relative;min-width:250px;min-height:200px}floodteam-photo-carousel ion-slide ion-img{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}floodteam-photo-carousel floodteam-input-photo{height:0px;width:0px;visibility:hidden;opacity:0;display:block}floodteam-photo-carousel floodteam-fallback{--floodteam-fallback-icon-size:10vw}floodteam-photo-carousel floodteam-fallback ion-icon{max-width:120px;max-height:120px;color:var(--ion-color-base-dark)}floodteam-photo-carousel .photo-pagination{position:absolute;top:10px;left:8px;color:#666;display:block;z-index:2;padding-right:10px}floodteam-photo-carousel ion-fab.select-photo{position:absolute;top:-10px;right:-10px;z-index:2}";

const PhotoCarousel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.badgeColor = "medium";
        this.addButtonColor = "primary";
        this.hideAddButton = false;
        this.photos = [];
        this.currentSlide = 0;
        this.options = {};
    }
    async onSlideChange() {
        this.currentSlide = (await this.photoSlidesEl.getActiveIndex()) + 1;
    }
    async getCurrentSlide() {
        this.currentSlide = (await this.photoSlidesEl.getActiveIndex()) + 1;
        return this.currentSlide;
    }
    async slideNext() {
        return this.photoSlidesEl.slideNext();
    }
    async slidePrev() {
        return this.photoSlidesEl.slidePrev();
    }
    async slideTo(slideNumber) {
        return this.photoSlidesEl.slideTo(slideNumber - 1);
    }
    async selectFiles(event) {
        return this.inputPhotoEl.triggerFileInput(event);
    }
    async update() {
        this.currentSlide = (await this.photoSlidesEl.getActiveIndex()) + 1;
        return this.photoSlidesEl.update();
    }
    componentDidLoad() {
        var _a;
        if (!((_a = this.photoSlidesEl) === null || _a === void 0 ? void 0 : _a.getActiveIndex)) {
            setTimeout(this.componentDidLoad, 200);
            return;
        }
        setTimeout(async () => {
            this.currentSlide = (await this.photoSlidesEl.getActiveIndex()) + 1;
            await this.photoSlidesEl.update();
        }, 200);
    }
    render() {
        var _a, _b;
        return (h(Host, null, h("floodteam-input-photo", { ref: (el) => (this.inputPhotoEl = el), path: `jobs/${this.jobId}/photos`, documentId: this.jobId, fileName: new Date().toISOString() }), ((_a = this.photos) === null || _a === void 0 ? void 0 : _a.length) ? (h("ion-badge", { color: this.badgeColor, class: "photo-pagination" }, this.currentSlide, " / ", this.photos.length)) : null, !this.hideAddButton ? (h("ion-fab", { class: "select-photo", onClick: (event) => this.selectFiles(event) }, h("ion-fab-button", { color: this.addButtonColor }, h("ion-icon", { name: "add" })))) : null, ((_b = this.photos) === null || _b === void 0 ? void 0 : _b.length) ? (h("ion-slides", { ref: (el) => (this.photoSlidesEl = el), pager: false, options: this.options }, this.photos.map((photo) => (h("ion-slide", null, h("ion-img", { src: photo.url })))))) : (h("floodteam-fallback", { icon: "image", message: "No Picture Taken..." }))));
    }
};
PhotoCarousel.style = photoCarouselCss;

export { PhotoCarousel as floodteam_photo_carousel };
