import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

type shopDataType = {
  image: string;
  title: string;
  price: string;
};

type categoryListType = {
  title: string;
  number: string;
};

@Component({
  selector: 'app-shop-left',
  imports: [RouterLink],
  template: `
    <div class="shop-sidebar">
      <div class="blog-shearch _relative">
        <form>
          <div class="search-input">
            <input type="search" placeholder="Search here...." />
          </div>
          <div class="search-button">
            <button><i class="fa-solid fa-magnifying-glass"></i></button>
          </div>
        </form>
      </div>
      <div class="space40"></div>
      <div class="single-widget">
        <h3>Filter by Price</h3>

        <div class="filter level-filter level-req">
          <div id="rangeSlider" class="range-slider">
            <div class="range-group">
              <input
                class="range-input"
                type="range"
                [value]="minPrice"
                min="1"
                max="500"
                step="1"
                (input)="updateMinPrice($event)"
              />
              <input
                class="range-input"
                type="range"
                [value]="maxPrice"
                min="1"
                max="500"
                step="1"
                (input)="updateMaxPrice($event)"
              />
            </div>

            <div class="filter-options">
              <div class="range-filter-button">
                <a [routerLink]="[]" class="comon-button">Filter</a>
              </div>
              <div class="range-slider-output">
                <p>Price:</p>
                <div class="number-group">
                  $<input
                    class="number-input"
                    type="number"
                    [value]="minPrice"
                    min="0"
                    max="500"
                    (input)="updateMinPrice($event)"
                  />- $<input
                    class="number-input"
                    type="number"
                    [value]="maxPrice"
                    min="0"
                    max="500"
                    (input)="updateMaxPrice($event)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="single-widget">
        <h3>Categories</h3>

        <div class="space24"></div>

        <ul class="Categories-list">
          @for(item of categorylist;track $index){
          <li>
            <a [routerLink]="[]">{{ item.title }}</a
            ><a [routerLink]="[]">{{ item.number }}</a>
          </li>
          }
        </ul>
      </div>

      <div class="single-widget">
        <h3>Popular Product</h3>

        <div class="space24"></div>

        @for(item of shopData;track $index;let last = $last){
        <div class="product-items-all _relative">
          <div class="product-items-img">
            <img [src]="item.image" alt="" />
          </div>
          <div class="product-items-hadding">
            <h6>
              <a routerLink="/cart">{{ item.title }}</a>
            </h6>
            <div class="space4"></div>
            <div class="">
              <div class="product-items-p">
                <div class="">
                  <p>{{ item.price }}</p>
                </div>
                <div class="review">
                  <ul>
                    <li><i class="fa-solid fa-star"></i></li>
                    <li><i class="fa-solid fa-star"></i></li>
                    <li><i class="fa-solid fa-star"></i></li>
                    <li><i class="fa-solid fa-star"></i></li>
                    <li><i class="fa-solid fa-star"></i></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        @if (!last) {
        <div class="shop-box-border"></div>
        } }
      </div>

      <div class="single-widget widget_tag_cloud">
        <h3>Tags</h3>
        <div class="space24"></div>
        <div class="tagcloud">
          @for(item of tagsData;track $index){
          <a [routerLink]="[]">{{ item }}</a>
          }
        </div>
      </div>
    </div>
  `,
  styles: ``,
})
export class ShopLeftComponent {
  minPrice = 100;
  maxPrice = 350;

  updateMinPrice(event: Event): void {
    const input = event.target as HTMLInputElement;
    this.minPrice = Number(input.value);
  }

  updateMaxPrice(event: Event): void {
    const input = event.target as HTMLInputElement;
    this.maxPrice = Number(input.value);
  }

  shopData: shopDataType[] = [
    {
      image: 'assets/img/shop/product1.png',
      title: 'Chair and pillow',
      price: '$1200',
    },
    {
      image: 'assets/img/shop/product2.png',
      title: 'Comfort modern chair',
      price: '$2200',
    },
    {
      image: 'assets/img/shop/product3.png',
      title: 'Chair and pillow',
      price: '$1200',
    },
    {
      image: 'assets/img/shop/product4.png',
      title: 'Comfort modern chair',
      price: '$2200',
    },
  ];

  categorylist: categoryListType[] = [
    {
      title: 'Business',
      number: '(3)',
    },
    {
      title: 'Corporate',
      number: '(2)',
    },
    {
      title: 'Consultancy',
      number: '(4)',
    },
    {
      title: 'Finance',
      number: '(1)',
    },
    {
      title: 'Consultancy',
      number: '(6)',
    },
    {
      title: 'HR Consultency',
      number: '(5)',
    },
  ];

  tagsData: string[] = [
    'Finance',
    'Business',
    'Consultancy',
    'Process',
    'Campeigns',
    'Corporate',
    'HR Consultency',
    'Consultancy',
  ];
}
