import { Component, Input } from '@angular/core';
import { ButtonDirectiveDirective } from '../../../directive/button-directive.directive';
import { MatIcon } from '@angular/material/icon';
import { AnimationDirective } from '../../../directive/animation-directive';
import { HoverDirective } from '../../../directive/hover-element-directive';
import { ContentFitDirective } from '../../../directive/content-fit-directive';
import { SimpoComponentModule } from '../../../components/index';
import { CommonModule } from '@angular/common';
import BaseSection from '../../../sections/BaseSection';
import { BUSINESS_CONSTANTS } from '../../../constants/business.constant';
import { MessageService } from 'primeng/api';
import { ToastModule } from 'primeng/toast';
import { BackgroundDirective } from '../../../directive/background-directive';
import { OverlayDirective } from '../../../directive/overlay-directive';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/cart.service";
import * as i2 from "../../../services/events.service";
import * as i3 from "../../../services/storage.service";
import * as i4 from "../../../services/rest.service";
import * as i5 from "primeng/api";
import * as i6 from "@angular/router";
import * as i7 from "../../../components/hover-elements/hover-elements.component";
import * as i8 from "../../../components/delete-hover-element/delete-hover-element.component";
import * as i9 from "ngx-skeleton-loader";
import * as i10 from "@angular/common";
import * as i11 from "primeng/toast";
export class WhislistComponent extends BaseSection {
    constructor(cartService, _eventService, storageService, restService, messageService, router) {
        super();
        this.cartService = cartService;
        this._eventService = _eventService;
        this.storageService = storageService;
        this.restService = restService;
        this.messageService = messageService;
        this.router = router;
        this.edit = true;
        this.isLoading = false;
        this.USER_WISHLIST_ITEMS = [];
        this.wishlistInfo = {
            orderedItems: null,
            businessId: localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
            billdetails: {
                "totalNetValue": 0,
                "totalGrossValue": 0,
                "totalTax": 0,
                "totalOfferedValue": 0,
                "deliveryCharges": 0
            },
            addressDetails: null,
            platform: "WEB",
            cartType: "WISHLIST",
            userDetails: {
                "userId": "",
                "userName": "",
                "mobile": "",
                "email": ""
            },
            totalAmount: 0
        };
    }
    ngOnInit() {
        this.styles = this.data?.styles;
        this._eventService.showLoadingScreen.subscribe((response) => {
            this.isLoading = response;
            if (!this.isLoading) {
                this.getWishlistIndexDBData();
            }
        });
        if (this.storageService.getUser()) {
            this.userDetails = this.storageService.getUser();
            this.wishlistInfo.userDetails = {
                "userId": this.userDetails?.userId,
                "userName": this.userDetails?.contact.name,
                "mobile": this.userDetails?.contact.mobile,
                "email": this.userDetails?.contact.email
            };
            this.restService.getUserItems(this.userDetails.userId, "WISHLIST").subscribe((response) => {
                const tempUserWishlist = response?.data?.[0]?.orderedItems ?? [];
                this.wishlistInfo["cartId"] = response.data?.[0]?.cartId;
                if (response.data?.[0]?.orderedItems?.length) {
                    this.storageService.addAllProductToWishlist(tempUserWishlist).oncomplete = () => {
                        this.storageService.getUserWhishlist().then((wishtlistResponse) => {
                            wishtlistResponse.onsuccess = (wishlistData) => {
                                const wishlistResponse = this.restService.addItemToDB(this.wishlistInfo).toPromise();
                                wishlistResponse.finally(() => {
                                    this.USER_WISHLIST_ITEMS = wishlistData.target.result;
                                    this.wishlistInfo.orderedItems = this.USER_WISHLIST_ITEMS;
                                    this.responseData = this.wishlistInfo;
                                });
                            };
                        });
                    };
                }
                else {
                    this.storageService.getUserWhishlist().then((response) => {
                        response.onsuccess = (userWishlistResponse) => {
                            this.USER_WISHLIST_ITEMS = userWishlistResponse.target.result;
                            this.wishlistInfo.orderedItems = this.USER_WISHLIST_ITEMS;
                            this.responseData = this.wishlistInfo;
                            this.restService.addItemToDB(this.responseData).subscribe((response) => {
                                localStorage.setItem('wishlistId', response.data?.cartId);
                                this.wishlistInfo["cartId"] = response.data?.cartId;
                                this.responseData = this.wishlistInfo;
                            });
                        };
                    });
                }
            });
        }
        else {
            this.getWishlistIndexDBData();
        }
    }
    moveToCart(product) {
        if (!product.quantity)
            product.quantity = 1;
        const userDetails = this.storageService.getUser();
        if (!!userDetails) {
            const payload = {
                "items": [
                    {
                        "itemId": product.itemId,
                        "businessId": product.businessId,
                        "itemName": product.itemName,
                        "businessName": product.businessName,
                        "imgUrl": product.imgUrl,
                        "taxCategory": "NON_MRP",
                        "quantity": product.quantity,
                        "price": product.price,
                        "itemTax": product.itemTax,
                        "discountedPrice": product.discountedPrice
                    }
                ]
            };
            this.restService.moveItemToCart(userDetails.userId, payload).subscribe((response) => { });
        }
        const transaction = this.storageService.addProductToCart(product);
        transaction.onsuccess = (wishlistResponse) => {
            this.storageService.removeProductFromWishlist(product.itemId).onsuccess = (wislistResponse) => {
                // this.storageService.addProductToCart(product).onsuccess = (cartResponse) => {
                this.USER_WISHLIST_ITEMS = this.USER_WISHLIST_ITEMS.filter((item) => item.varientId != product.varientId);
                this.wishlistInfo.orderedItems = this.USER_WISHLIST_ITEMS;
                this.responseData = this.wishlistInfo;
                // }
            };
            this.messageService.add({ severity: 'success', summary: 'Move to cart', detail: 'Item successfully moved to cart' });
        };
        transaction.onerror = (wishlistResponse) => {
            this.messageService.add({ severity: 'error', summary: 'Failure', detail: 'Failed to move item to cart' });
        };
    }
    getWishlistIndexDBData() {
        this.storageService.getUserWhishlist().then((response) => {
            response.onsuccess = (userWishlistResponse) => {
                this.USER_WISHLIST_ITEMS = userWishlistResponse.target.result;
                this.wishlistInfo.orderedItems = this.USER_WISHLIST_ITEMS;
                this.responseData = this.wishlistInfo;
            };
        });
    }
    deleteFromWhislist(product) {
        this.USER_WISHLIST_ITEMS = this.USER_WISHLIST_ITEMS.filter((item) => item.varientId != product.varientId);
        this.wishlistInfo.orderedItems = this.USER_WISHLIST_ITEMS;
        this.responseData = this.wishlistInfo;
        if (this.storageService.getUser()) {
            this.cartService.removeItemFromWishlistPage(product, this.wishlistInfo).subscribe((response) => { });
        }
        else {
            const transaction = this.storageService.removeProductFromWishlist(product.varientId);
        }
    }
    addToFav(item, type) {
        if (type == 'ADD')
            item.quantity += 1;
        else
            item.quantity -= 1;
        if (this.storageService.getUser()) {
            this.wishlistInfo.orderedItems?.forEach((product) => {
                if (item.varientId == product.varientId)
                    product.quantity = item.quantity;
            });
            this.cartService.addItemFromWishlistPage(item, this.wishlistInfo).subscribe((response) => { });
        }
        else {
            this.storageService.addProductToWishlist(item);
        }
    }
    getKeys(object) {
        if (object)
            return Object.keys(object);
        return [];
    }
    editSection() {
        if (window.innerWidth <= 475)
            return;
        this._eventService.toggleEditorEvent.emit(false);
        setTimeout(() => {
            this._eventService.editSection.emit({ data: this.data });
        }, 100);
    }
    get isMobile() {
        return window.innerWidth < 475;
    }
    get currency() {
        return BUSINESS_CONSTANTS.CURRENCY;
    }
    toSlug(input) {
        if (!input)
            return null;
        const noWhitespace = input.replace(/\s+/g, '-');
        const normalized = noWhitespace.normalize('NFD');
        const slug = normalized.replace(/[^\w-]/g, '');
        return slug
            .toLowerCase()
            .replace(/-+/g, '-')
            .replace(/^-|-$/g, '');
    }
    redirectToProduct(product) {
        const slug = product.slugifiedName || this.toSlug(product.itemName);
        if (!slug)
            return;
        this.router.navigate(['/details', slug]);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WhislistComponent, deps: [{ token: i1.CartService }, { token: i2.EventsService }, { token: i3.StorageServiceService }, { token: i4.RestService }, { token: i5.MessageService }, { token: i6.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <div class=\"wishlist-wrapper\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n\r\n      <div class=\"container container-custom\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"styles?.animation\">\r\n\r\n        <div class=\"wishlist-header\">\r\n          <h1 class=\"wishlist-title\">\r\n            Your Wishlist <span class=\"item-count\">({{responseData?.orderedItems?.length}} Items)</span>\r\n          </h1>\r\n        </div>\r\n\r\n        <div class=\"wishlist-items-container\">\r\n          <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n            <div class=\"wishlist-item-row\" [ngClass]=\"{ 'single-item': responseData?.orderedItems?.length === 1 }\">\r\n\r\n              <div class=\"item-left\">\r\n                <div class=\"item-image\" (click)=\"redirectToProduct(item)\">\r\n                  <img loading=\"lazy\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                    onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n                    alt=\"{{item.itemName}}\">\r\n                </div>\r\n\r\n                <div class=\"item-details\">\r\n                  <h3 class=\"product-name\" (click)=\"redirectToProduct(item)\">\r\n                    {{item.itemName}}\r\n                  </h3>\r\n\r\n                  <div class=\"variants-box\" *ngIf=\"item.itemVariant\">\r\n                    <div class=\"variant-item\" *ngFor=\"let variant of getKeys(item.itemVariant.properties)\">\r\n                      <span class=\"variant-value\">{{ item.itemVariant.properties[variant] | titlecase }}</span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"item-right\">\r\n                <div class=\"quantity-control-wrapper\">\r\n                  <div class=\"quantity-control\" *ngIf=\"item.quantity\">\r\n                    <button class=\"qty-btn\" (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                      <mat-icon>remove</mat-icon>\r\n                    </button>\r\n                    <span class=\"qty-value px-3\">{{item.quantity}}</span>\r\n                    <button class=\"qty-btn\" (click)=\"addToFav(item, 'ADD')\">\r\n                      <mat-icon>add</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                  <div class=\"add-qty-trigger\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">\r\n                    Add Quantity\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"price-section\">\r\n                  <div class=\"product-price\">\r\n                    <span class=\"currency\" [innerHTML]=\"currency\"></span>\r\n                    <span class=\"amount\">{{item.discountedPrice ?? item.sellingPrice}}</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"actions-group\">\r\n                  <div class=\"action-btn move-to-cart-svg\" (click)=\"moveToCart(item)\" pTooltip=\"Move to Cart\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                      stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                      class=\"lucide lucide-shopping-cart\">\r\n                      <circle cx=\"8\" cy=\"21\" r=\"1\" />\r\n                      <circle cx=\"19\" cy=\"21\" r=\"1\" />\r\n                      <path d=\"M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12\" />\r\n                    </svg>\r\n                  </div>\r\n\r\n                  <div class=\"delete-btn-circle\" (click)=\"deleteFromWhislist(item)\" pTooltip=\"Remove\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                      stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\r\n                      <path d=\"M3 6h18\" />\r\n                      <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\r\n                      <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\r\n                      <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\r\n                      <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\r\n                    </svg>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Empty Wishlist State -->\r\n      <section class=\"empty-wishlist\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n        <div class=\"empty-container\">\r\n          <div class=\"empty-icon-wrapper\">\r\n            <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n              alt=\"Empty Wishlist\" class=\"empty-img\">\r\n          </div>\r\n          <div class=\"empty-content\">\r\n            <h2 class=\"empty-title\" [style.color]=\"styles?.background?.accentColor\">Your Wishlist is Empty</h2>\r\n            <p class=\"empty-desc\" [style.color]=\"styles?.background?.accentColor\">\r\n              Seems like you haven't discovered your favorites yet. Explore our top collections and add what you love!\r\n            </p>\r\n            <!-- <button class=\"explore-btn\" (click)=\"redirectToProduct({itemId: '', varientId: ''})\">Explore Now</button> -->\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </div>\r\n\r\n    <!-- Editors -->\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative'\r\n}\"></ngx-skeleton-loader>", styles: [":host{--wishlist-bg: #f8fafc;--wishlist-card-bg: #ffffff;--wishlist-border: #e2e8f0;--wishlist-text-main: #0f172a;--wishlist-text-muted: #64748b;--wishlist-accent: var(--accent-color, #1e293b);--wishlist-danger: #ef4444;--wishlist-transition: all .2s cubic-bezier(.4, 0, .2, 1);font-family:var(--website-font-family, \"Inter\", -apple-system, sans-serif)}.total-container{min-height:75vh;background:var(--wishlist-bg)}.wishlist-header{margin-bottom:24px}.wishlist-title{font-size:24px;font-weight:700;color:var(--wishlist-text-main);margin:0;letter-spacing:-.02em}.item-count{font-size:14px;font-weight:500;color:var(--wishlist-text-muted);margin-left:8px}.wishlist-items-container{background:var(--wishlist-card-bg);border:1px solid var(--wishlist-border);border-radius:12px;box-shadow:0 1px 3px #00000005;overflow:hidden}.wishlist-header-row{display:flex;padding:16px 24px;background:#fff;border-bottom:1px solid var(--wishlist-border);font-size:16px;font-weight:600;color:var(--wishlist-text-main)}.wishlist-item-row{display:flex;align-items:center;padding:14px;border-bottom:1px solid #f1f5f9;transition:var(--wishlist-transition)}.wishlist-item-row:hover{background:#fbfcfe}.wishlist-item-row:last-child{border-bottom:none}.item-left{display:flex;align-items:center;flex:2;gap:20px}.item-image{width:80px;height:80px;flex-shrink:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#f8fafc;border:1px solid #f1f5f9}.product-image{width:100%;height:100%;object-fit:cover}.item-details{display:flex;flex-direction:column;gap:6px}.product-name{font-size:14px;font-weight:600;color:var(--wishlist-text-main);margin:0;cursor:pointer;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.variants-box{display:flex;flex-wrap:wrap;gap:8px}.variant-value{font-size:14px;color:var(--wishlist-text-muted);font-weight:400}.item-right{display:flex;align-items:center;flex:2;gap:40px;justify-content:flex-end}.quantity-control-wrapper{flex:1;display:flex;justify-content:center}.quantity-control{display:flex;align-items:center;border:1px solid var(--wishlist-border);border-radius:8px;background:#fff;height:36px;overflow:hidden}.qty-btn{width:40px;height:100%;background:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--wishlist-text-main);transition:var(--wishlist-transition)}.qty-btn:hover{background:#f8fafc}.qty-btn mat-icon{font-size:18px;width:18px;height:18px}.qty-value{width:36px;text-align:center;font-size:15px;font-weight:600;color:var(--wishlist-text-main);border-left:1px solid var(--wishlist-border);border-right:1px solid var(--wishlist-border);height:100%;display:flex;align-items:center;justify-content:center}.add-qty-trigger{padding:8px 16px;border:1px solid var(--wishlist-border);border-radius:8px;font-size:13px;font-weight:600;color:var(--wishlist-text-main);cursor:pointer;transition:var(--wishlist-transition)}.add-qty-trigger:hover{background:#f8fafc}.price-section{min-width:100px;text-align:right}.product-price{font-size:18px;font-weight:700;color:var(--wishlist-text-main)}.currency{font-size:16px;margin-right:2px}.actions-group{display:flex;align-items:center;gap:16px}.action-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--wishlist-transition)}.move-to-cart-svg{background:#f1f5f9;color:var(--wishlist-text-main);border:1px solid transparent}.move-to-cart-svg:hover{background:#e2e8f0;transform:translateY(-2px)}.delete-btn-circle{width:40px;height:40px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--wishlist-danger);transition:var(--wishlist-transition)}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:translateY(-2px)}.delete-btn-circle svg,.move-to-cart-svg svg{width:20px;height:20px}.empty-wishlist{padding:100px 0;text-align:center}.empty-container{max-width:400px;margin:0 auto}.empty-img{width:200px;margin-bottom:32px;opacity:.9}.empty-title{font-size:24px;font-weight:700;color:var(--wishlist-text-main);margin-bottom:12px}.empty-desc{font-size:16px;color:var(--wishlist-text-muted);line-height:1.6}@media (max-width: 900px){.wishlist-item-row{flex-direction:column;align-items:stretch;gap:20px}.item-right{justify-content:space-between;width:100%;flex:auto}}@media (max-width: 600px){.item-left{gap:12px}.item-image{width:80px;height:80px}.product-name{font-size:15px}.item-right{flex-wrap:wrap;gap:16px}.quantity-control-wrapper{order:2;justify-content:flex-start}.price-section{order:1;min-width:0}.actions-group{order:3;width:100%;justify-content:flex-end}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i7.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i8.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i9.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i10.TitleCasePipe, name: "titlecase" }, { kind: "directive", type: 
                //DIRECTIVE
                BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WhislistComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-whislist', standalone: true, imports: [
                        MatIcon,
                        SimpoComponentModule,
                        CommonModule,
                        //DIRECTIVE
                        BackgroundDirective,
                        ButtonDirectiveDirective,
                        AnimationDirective,
                        ContentFitDirective,
                        OverlayDirective,
                        HoverDirective,
                        ToastModule
                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover\r\n    (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n    <div class=\"wishlist-wrapper\" [simpoOverlay]=\"styles?.background\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n\r\n      <div class=\"container container-custom\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n        [simpoAnimation]=\"styles?.animation\">\r\n\r\n        <div class=\"wishlist-header\">\r\n          <h1 class=\"wishlist-title\">\r\n            Your Wishlist <span class=\"item-count\">({{responseData?.orderedItems?.length}} Items)</span>\r\n          </h1>\r\n        </div>\r\n\r\n        <div class=\"wishlist-items-container\">\r\n          <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n            <div class=\"wishlist-item-row\" [ngClass]=\"{ 'single-item': responseData?.orderedItems?.length === 1 }\">\r\n\r\n              <div class=\"item-left\">\r\n                <div class=\"item-image\" (click)=\"redirectToProduct(item)\">\r\n                  <img loading=\"lazy\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                    onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\r\n                    alt=\"{{item.itemName}}\">\r\n                </div>\r\n\r\n                <div class=\"item-details\">\r\n                  <h3 class=\"product-name\" (click)=\"redirectToProduct(item)\">\r\n                    {{item.itemName}}\r\n                  </h3>\r\n\r\n                  <div class=\"variants-box\" *ngIf=\"item.itemVariant\">\r\n                    <div class=\"variant-item\" *ngFor=\"let variant of getKeys(item.itemVariant.properties)\">\r\n                      <span class=\"variant-value\">{{ item.itemVariant.properties[variant] | titlecase }}</span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"item-right\">\r\n                <div class=\"quantity-control-wrapper\">\r\n                  <div class=\"quantity-control\" *ngIf=\"item.quantity\">\r\n                    <button class=\"qty-btn\" (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n                      <mat-icon>remove</mat-icon>\r\n                    </button>\r\n                    <span class=\"qty-value px-3\">{{item.quantity}}</span>\r\n                    <button class=\"qty-btn\" (click)=\"addToFav(item, 'ADD')\">\r\n                      <mat-icon>add</mat-icon>\r\n                    </button>\r\n                  </div>\r\n                  <div class=\"add-qty-trigger\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">\r\n                    Add Quantity\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"price-section\">\r\n                  <div class=\"product-price\">\r\n                    <span class=\"currency\" [innerHTML]=\"currency\"></span>\r\n                    <span class=\"amount\">{{item.discountedPrice ?? item.sellingPrice}}</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"actions-group\">\r\n                  <div class=\"action-btn move-to-cart-svg\" (click)=\"moveToCart(item)\" pTooltip=\"Move to Cart\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                      stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                      class=\"lucide lucide-shopping-cart\">\r\n                      <circle cx=\"8\" cy=\"21\" r=\"1\" />\r\n                      <circle cx=\"19\" cy=\"21\" r=\"1\" />\r\n                      <path d=\"M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12\" />\r\n                    </svg>\r\n                  </div>\r\n\r\n                  <div class=\"delete-btn-circle\" (click)=\"deleteFromWhislist(item)\" pTooltip=\"Remove\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                      stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\r\n                      <path d=\"M3 6h18\" />\r\n                      <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\r\n                      <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\r\n                      <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\r\n                      <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\r\n                    </svg>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Empty Wishlist State -->\r\n      <section class=\"empty-wishlist\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n        <div class=\"empty-container\">\r\n          <div class=\"empty-icon-wrapper\">\r\n            <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n              alt=\"Empty Wishlist\" class=\"empty-img\">\r\n          </div>\r\n          <div class=\"empty-content\">\r\n            <h2 class=\"empty-title\" [style.color]=\"styles?.background?.accentColor\">Your Wishlist is Empty</h2>\r\n            <p class=\"empty-desc\" [style.color]=\"styles?.background?.accentColor\">\r\n              Seems like you haven't discovered your favorites yet. Explore our top collections and add what you love!\r\n            </p>\r\n            <!-- <button class=\"explore-btn\" (click)=\"redirectToProduct({itemId: '', varientId: ''})\">Explore Now</button> -->\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </div>\r\n\r\n    <!-- Editors -->\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n\r\n  </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative'\r\n}\"></ngx-skeleton-loader>", styles: [":host{--wishlist-bg: #f8fafc;--wishlist-card-bg: #ffffff;--wishlist-border: #e2e8f0;--wishlist-text-main: #0f172a;--wishlist-text-muted: #64748b;--wishlist-accent: var(--accent-color, #1e293b);--wishlist-danger: #ef4444;--wishlist-transition: all .2s cubic-bezier(.4, 0, .2, 1);font-family:var(--website-font-family, \"Inter\", -apple-system, sans-serif)}.total-container{min-height:75vh;background:var(--wishlist-bg)}.wishlist-header{margin-bottom:24px}.wishlist-title{font-size:24px;font-weight:700;color:var(--wishlist-text-main);margin:0;letter-spacing:-.02em}.item-count{font-size:14px;font-weight:500;color:var(--wishlist-text-muted);margin-left:8px}.wishlist-items-container{background:var(--wishlist-card-bg);border:1px solid var(--wishlist-border);border-radius:12px;box-shadow:0 1px 3px #00000005;overflow:hidden}.wishlist-header-row{display:flex;padding:16px 24px;background:#fff;border-bottom:1px solid var(--wishlist-border);font-size:16px;font-weight:600;color:var(--wishlist-text-main)}.wishlist-item-row{display:flex;align-items:center;padding:14px;border-bottom:1px solid #f1f5f9;transition:var(--wishlist-transition)}.wishlist-item-row:hover{background:#fbfcfe}.wishlist-item-row:last-child{border-bottom:none}.item-left{display:flex;align-items:center;flex:2;gap:20px}.item-image{width:80px;height:80px;flex-shrink:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#f8fafc;border:1px solid #f1f5f9}.product-image{width:100%;height:100%;object-fit:cover}.item-details{display:flex;flex-direction:column;gap:6px}.product-name{font-size:14px;font-weight:600;color:var(--wishlist-text-main);margin:0;cursor:pointer;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.variants-box{display:flex;flex-wrap:wrap;gap:8px}.variant-value{font-size:14px;color:var(--wishlist-text-muted);font-weight:400}.item-right{display:flex;align-items:center;flex:2;gap:40px;justify-content:flex-end}.quantity-control-wrapper{flex:1;display:flex;justify-content:center}.quantity-control{display:flex;align-items:center;border:1px solid var(--wishlist-border);border-radius:8px;background:#fff;height:36px;overflow:hidden}.qty-btn{width:40px;height:100%;background:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--wishlist-text-main);transition:var(--wishlist-transition)}.qty-btn:hover{background:#f8fafc}.qty-btn mat-icon{font-size:18px;width:18px;height:18px}.qty-value{width:36px;text-align:center;font-size:15px;font-weight:600;color:var(--wishlist-text-main);border-left:1px solid var(--wishlist-border);border-right:1px solid var(--wishlist-border);height:100%;display:flex;align-items:center;justify-content:center}.add-qty-trigger{padding:8px 16px;border:1px solid var(--wishlist-border);border-radius:8px;font-size:13px;font-weight:600;color:var(--wishlist-text-main);cursor:pointer;transition:var(--wishlist-transition)}.add-qty-trigger:hover{background:#f8fafc}.price-section{min-width:100px;text-align:right}.product-price{font-size:18px;font-weight:700;color:var(--wishlist-text-main)}.currency{font-size:16px;margin-right:2px}.actions-group{display:flex;align-items:center;gap:16px}.action-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--wishlist-transition)}.move-to-cart-svg{background:#f1f5f9;color:var(--wishlist-text-main);border:1px solid transparent}.move-to-cart-svg:hover{background:#e2e8f0;transform:translateY(-2px)}.delete-btn-circle{width:40px;height:40px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--wishlist-danger);transition:var(--wishlist-transition)}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:translateY(-2px)}.delete-btn-circle svg,.move-to-cart-svg svg{width:20px;height:20px}.empty-wishlist{padding:100px 0;text-align:center}.empty-container{max-width:400px;margin:0 auto}.empty-img{width:200px;margin-bottom:32px;opacity:.9}.empty-title{font-size:24px;font-weight:700;color:var(--wishlist-text-main);margin-bottom:12px}.empty-desc{font-size:16px;color:var(--wishlist-text-muted);line-height:1.6}@media (max-width: 900px){.wishlist-item-row{flex-direction:column;align-items:stretch;gap:20px}.item-right{justify-content:space-between;width:100%;flex:auto}}@media (max-width: 600px){.item-left{gap:12px}.item-image{width:80px;height:80px}.product-name{font-size:15px}.item-right{flex-wrap:wrap;gap:16px}.quantity-control-wrapper{order:2;justify-content:flex-start}.price-section{order:1;min-width:0}.actions-group{order:3;width:100%;justify-content:flex-end}}\n"] }]
        }], ctorParameters: () => [{ type: i1.CartService }, { type: i2.EventsService }, { type: i3.StorageServiceService }, { type: i4.RestService }, { type: i5.MessageService }, { type: i6.Router }], propDecorators: { responseData: [{
                type: Input
            }], data: [{
                type: Input
            }], index: [{
                type: Input
            }], edit: [{
                type: Input
            }], delete: [{
                type: Input
            }], customClass: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 