import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { BarcodeDirective } from './barcode.directive';

/**
 * Component wrapper for the barcode directive that provides an easier-to-use API.
 * Renders a Code 128 barcode as an SVG element within a container.
 *
 * @example
 * ```html
 * <shared-barcode
 *   [value]="'123456789'"
 *   [width]="2"
 *   [height]="100"
 *   [containerWidth]="'300px'"
 *   [containerHeight]="'88px'"
 *   [background]="'#ffffff'"
 * />
 * ```
 */
@Component({
  selector: 'shared-barcode',
  standalone: true,
  imports: [BarcodeDirective],
  template: `
    <svg
      sharedBarcode
      [value]="value()"
      [format]="format()"
      [width]="width()"
      [height]="height()"
      [displayValue]="displayValue()"
      [lineColor]="lineColor()"
      [background]="svgBackground()"
      [fontSize]="fontSize()"
      [margin]="margin()"
    ></svg>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[style.width]': 'containerWidth()',
    '[style.height]': 'containerHeight()',
    '[style.background-color]': 'background()',
    '[style.display]': '"flex"',
    '[style.align-items]': '"center"',
    '[style.justify-content]': '"center"',
  },
})
export class BarcodeComponent {
  /**
   * The barcode value to encode (required)
   */
  value = input.required<string>();

  /**
   * Barcode format (default: CODE128)
   */
  format = input<string>('CODE128');

  /**
   * Width of a single bar in pixels (default: 2)
   */
  width = input<number>(2);

  /**
   * Height of the barcode in pixels (default: 100)
   */
  height = input<number>(100);

  /**
   * Whether to display the human-readable value below the barcode (default: true)
   */
  displayValue = input<boolean>(true);

  /**
   * Color of the barcode bars and text (default: #000000)
   */
  lineColor = input<string>('#000000');

  /**
   * Background color of the container (default: #ffffff)
   */
  background = input<string>('#ffffff');

  /**
   * Background color of the SVG barcode itself (default: transparent)
   */
  svgBackground = input<string>('transparent');

  /**
   * Font size for the human-readable text (default: 20)
   */
  fontSize = input<number>(20);

  /**
   * Margin around the barcode in pixels (default: 10)
   */
  margin = input<number>(10);

  /**
   * Width of the container (default: 12.5rem)
   */
  containerWidth = input<string>('12.5rem');

  /**
   * Height of the container (default: 5.5rem)
   */
  containerHeight = input<string>('5.5rem');
}
