import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';

type BreakpointVisibility = 
  | 'always' 
  | 'mobile-only' 
  | 'tablet-only' 
  | 'desktop-only' 
  | 'mobile-hidden' 
  | 'tablet-hidden' 
  | 'desktop-hidden'
  | 'mobile-screen'
  | 'tablet-screen' 
  | 'desktop-screen'
  | 'sm-to-md'
  | 'md-to-lg';

type DisplayType = 'block' | 'inline' | 'flex';

type BreakpointRule = 'show-sm' | 'hide-sm' | 'show-md' | 'hide-md' | 'show-lg' | 'hide-lg';

@Component({
  selector: 'ui-breakpoint-container',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  template: `
    <div 
      class="ui-breakpoint-container"
      [class]="getComponentClasses()"
      [attr.role]="role"
      [attr.aria-hidden]="getAriaHidden()">
      
      <ng-content></ng-content>
    </div>
  `,
  styleUrl: './breakpoint-container.component.scss'
})
export class BreakpointContainerComponent {
  @Input() visibility: BreakpointVisibility = 'always';
  @Input() displayType: DisplayType = 'block';
  @Input() showSm = false;
  @Input() hideSm = false;
  @Input() showMd = false;
  @Input() hideMd = false;
  @Input() showLg = false;
  @Input() hideLg = false;
  @Input() printHidden = false;
  @Input() printOnly = false;
  @Input() role?: string;

  getComponentClasses(): string {
    const classes = ['ui-breakpoint-container'];
    
    if (this.visibility !== 'always') {
      classes.push(`ui-breakpoint-container--${this.visibility}`);
    }
    
    if (this.displayType !== 'block') {
      classes.push(`ui-breakpoint-container--${this.displayType}`);
    }
    
    if (this.printHidden) {
      classes.push('ui-breakpoint-container--print-hidden');
    }
    
    if (this.printOnly) {
      classes.push('ui-breakpoint-container--print-only');
    }
    
    // Add breakpoint rule classes
    const breakpointRules = this.getBreakpointRuleClasses();
    Object.keys(breakpointRules).forEach(className => {
      if (breakpointRules[className]) {
        classes.push(className);
      }
    });
    
    return classes.join(' ');
  }

  getBreakpointRuleClasses(): Record<string, boolean> {
    return {
      'ui-breakpoint-container--show-sm': this.showSm,
      'ui-breakpoint-container--hide-sm': this.hideSm,
      'ui-breakpoint-container--show-md': this.showMd,
      'ui-breakpoint-container--hide-md': this.hideMd,
      'ui-breakpoint-container--show-lg': this.showLg,
      'ui-breakpoint-container--hide-lg': this.hideLg
    };
  }

  getAriaHidden(): string | null {
    // Don't set aria-hidden for content that might be visible
    if (this.visibility === 'always') {
      return null;
    }
    
    // For screen readers, we generally want to keep content accessible
    // unless it's explicitly meant to be hidden for print or specific contexts
    if (this.printOnly) {
      return 'true';
    }
    
    return null;
  }
}