import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { Router, Event, NavigationEnd, RouterLink } from '@angular/router';
import { filter } from 'rxjs/operators';

type DemosType = {
  image: string;
  title: string;
  multilink?: string;
  singlelink?: string;
};

type InnerType = {
  image: string;
  title: string;
  link: string;
};

@Component({
  selector: 'app-sidebar',
  imports: [RouterLink,CommonModule],
  template: `
    <div class="demo-sidebar font-f-4" [class.active-sidebar]="isSidebarActive" id="demo-sidebar">
      <div class="demo-sidebar-wrap">
        <div class="demo-sidebar-menu">
          <span
            data-bs-toggle="tooltip"
            title="View Demos"
            class="demosIcon"
            id="demosIcon"
             (click)="toggleSidebar()"
            ><i class="fa-solid fa-gear"></i
          ></span>
          <span data-bs-toggle="tooltip" title="Buy Theme"
            ><a [routerLink]="[]"><i class="fa-solid fa-cart-shopping"></i></a
          ></span>
        </div>
        <div class="demo-sidebar-content">
          <div class="heading2">
            <h2>Pre-Built Demos Collection</h2>
          </div>
          <div class="space20"></div>

          <div class="demo-sidebar-items">
            @for(item of demosData; track $index; let i = $index){
            <div class="single-demo-sidebar-item">
              <div class="demo-sidebar-item-img">
                <img [src]="item.image" alt="" />
                @if (i < demosData.length - 2) {
                <div class="demo-sidebar-buttons">
                  <a [routerLink]="item.multilink">Multi Page</a>
                  <a [routerLink]="item.singlelink">Landing Page</a>
                </div>
                }
              </div>
              <div class="demo-item-content">
                <a [routerLink]="item.multilink">{{ item.title }}</a>
              </div>
            </div>
            }
          </div>

          <div class="space30"></div>
          <div class="heading2">
            <h2>Pre-Built Inner Demos</h2>
          </div>
          -

          <div class="demo-sidebar-items inner-dmeos">
            @for(item of innerData;track $index){
            <div class="single-demo-sidebar-item">
              <div class="demo-sidebar-item-img">
                <img [src]="item.image" alt="" />
                <div class="demo-sidebar-buttons">
                  <a [routerLink]="item.link">View Page</a>
                </div>
              </div>
              <div class="demo-item-content">
                <a [routerLink]="item.link">{{ item.title }}</a>
              </div>
            </div>
            }
          </div>
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class SidebarComponent {
 
  isSidebarActive: boolean = false;

    constructor(private router: Router) {
    
    this.router.events
      .pipe(filter((event: Event): event is NavigationEnd => event instanceof NavigationEnd))
      .subscribe(() => {
        this.isSidebarActive = false;
      });
  }

  toggleSidebar() {
    this.isSidebarActive = !this.isSidebarActive;
  }

  demosData: DemosType[] = [
    {
      image: 'assets/img/demo/demo2.png',
      title: 'Home 1',
      multilink: '/',
      singlelink: '/single/home-1',
    },
    {
      image: 'assets/img/demo/demo1.png',
      title: 'Home 2',
      multilink: '/multi/home-2',
      singlelink: '/single/home-2',
    },
    {
      image: 'assets/img/demo/demo3.png',
      title: 'Home 3',
      multilink: '/multi/home-3',
      singlelink: '/single/home-3',
    },
    {
      image: 'assets/img/demo/demo4.png',
      title: 'Home 4',
      multilink: '/multi/home-4',
      singlelink: '/single/home-4',
    },
    {
      image: 'assets/img/demo/demo5.png',
      title: 'Home 5',
      multilink: '/multi/home-5',
      singlelink: '/single/home-5',
    },
    {
      image: 'assets/img/demo/demo6.png',
      title: 'Home 6',
      multilink: '/multi/home-6',
      singlelink: '/single/home-6',
    },
    {
      image: 'assets/img/demo/demo7.png',
      title: 'Home 7',
      multilink: '/multi/home-7',
      singlelink: '/single/home-7',
    },
    {
      image: 'assets/img/demo/demo8.png',
      title: 'Home 8',
      multilink: '/multi/home-8',
      singlelink: '/single/home-8',
    },
    {
      image: 'assets/img/demo/demo9.png',
      title: 'Home 9',
      multilink: '/multi/home-9',
      singlelink: '/single/home-9',
    },
    {
      image: 'assets/img/demo/demo10.png',
      title: 'Home 10',
      multilink: '/multi/home-10',
      singlelink: '/single/home-10',
    },
    {
      image: 'assets/img/demo/coming-soon.png',
      title: 'Coming Soon',
    },
    {
      image: 'assets/img/demo/coming-soon.png',
      title: 'Coming Soon',
    },
  ];

  innerData: InnerType[] = [
    {
      image: 'assets/img/demo/about.png',
      title: 'About Us',
      link: '/about',
    },
    {
      image: 'assets/img/demo/service-2.png',
      title: 'Service 1',
      link: '/service',
    },
       {
      image: 'assets/img/demo/service-2.png',
      title: 'Service 2',
      link: '/service2',
    },
    {
      image: 'assets/img/demo/service-details.png',
      title: 'Service Details',
      link: '/service-details',
    },
    {
      image: 'assets/img/demo/blog-1.png',
      title: 'Blog 1',
      link: '/blog',
    },
    {
      image: 'assets/img/demo/blog-2.png',
      title: 'Blog 2',
      link: '/blog2',
    },
    {
      image: 'assets/img/demo/blog-leftbar.png',
      title: 'Blog Left Bar',
      link: '/blog-sidebar-left',
    },
    {
      image: 'assets/img/demo/blog-rightbar.png',
      title: 'Blog Right Bar',
      link: '/blog-sidebar-right',
    },
    {
      image: 'assets/img/demo/details-leftbar.png',
      title: 'Blog Details Left bar',
      link: '/blog-details-sidebar-left',
    },
    {
      image: 'assets/img/demo/details-rightbar.png',
      title: 'blog Details Right Bar',
      link: '/blog-details-sidebar-right',
    },
    {
      image: 'assets/img/demo/blog-details.png',
      title: 'Blog Details',
      link: '/blog-details',
    },
    {
      image: 'assets/img/demo/case.png',
      title: 'Case Study',
      link: '/case',
    },
    {
      image: 'assets/img/demo/case-details-1.png',
      title: 'Case Details 1',
      link: '/case-details1',
    },
    {
      image: 'assets/img/demo/case-details-2.png',
      title: 'Case Details 2',
      link: '/case-details2',
    },
    {
      image: 'assets/img/demo/shop.png',
      title: 'shop',
      link: '/shop',
    },
    {
      image: 'assets/img/demo/shop-leftbar.png',
      title: 'Shop Left Sidebar',
      link: '/shop-sidebar-left',
    },
    {
      image: 'assets/img/demo/shop-rightbar.png',
      title: 'Shop Right Sidebar',
      link: '/shop-sidebar-right',
    },
    {
      image: 'assets/img/demo/shop-details.png',
      title: 'Shop Details',
      link: '/shop-details',
    },
    {
      image: 'assets/img/demo/contact.png',
      title: 'Contact',
      link: '/contact',
    },
    {
      image: 'assets/img/demo/faq.png',
      title: 'FAQ',
      link: '/faq',
    },
    {
      image: 'assets/img/demo/checkout.png',
      title: 'Checkout',
      link: '/checkout',
    },
    {
      image: 'assets/img/demo/cart.png',
      title: 'cart',
      link: '/cart',
    },
    {
      image: 'assets/img/demo/account-1.png',
      title: 'Account 1',
      link: '/account',
    },
    {
      image: 'assets/img/demo/account-2.png',
      title: 'Account 2',
      link: '/account2',
    },
    {
      image: 'assets/img/demo/error.png',
      title: 'Error',
      link: '/error',
    },
  ];


}
