import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
import { CartItemAttribute, CartItemComponent } from '../cart-item/cart-item.component';

export interface CartItemMock {
  imageUrl: string | null;
  product: string;
  originalPrice: number | null;
  discountedPrice: number;
  discountPercentage: number | null;
  attributes: CartItemAttribute[];
  quantity: number;
}

@Component({
  selector: 'app-cart',
  standalone: true,
  imports: [CartItemComponent],
  templateUrl: './cart.component.html',
  styleUrl: './cart.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CartComponent {
  readonly title = input<string>('CARRITO');
  readonly showClose = input<boolean>(false);
  readonly items = input<CartItemMock[]>([]);
  readonly subtotal = input<number>(0);
  readonly discount = input<number>(0);
  readonly total = input<number>(0);
  readonly backgroundColor = input<string>('#ffffff');

  readonly closed = output<void>();

  protected readonly formattedSubtotal = computed(() => this.formatCurrency(this.subtotal()));
  protected readonly formattedDiscount = computed(() => this.formatCurrency(this.discount()));
  protected readonly formattedTotal = computed(() => this.formatCurrency(this.total()));

  private formatCurrency(value: number): string {
    const rounded = Math.round(value);
    const parts = rounded.toString().split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    return `$ ${parts.join(',')}`;
  }
}