import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';

export type NavigationState = 'hide' | 'rail' | 'full';
export type SidebarState = 'hide' | 'show';

@Component({
  selector: 'ui-layout-container',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrl: './layout-container.component.scss',
  template: `
    <div class="ui-layout-container">
      <!-- Top navigation bar -->
      <div class="ui-layout-container__top-bar" 
           [style.flex-basis.px]="effectiveTopBarHeight()">
        <ng-content select="[slot=top-bar]"></ng-content>
      </div>

      <!-- Main content wrapper -->
      <div class="ui-layout-container__centre-wrapper">
        <!-- Left sidebar navigation -->
        <div class="left-navigation" 
             [class]="leftNavigationClasses()"
             [style.flex-basis.px]="leftNavigationWidth()">
          <ng-content select="[slot=left-navigation]"></ng-content>
        </div>

        <!-- Main content area -->
        <div class="main-body">
          <!-- Inner header -->
          <div class="main-body__header" 
               [style.flex-basis.px]="effectiveInnerHeaderHeight()">
            <ng-content select="[slot=inner-header]"></ng-content>
          </div>

          <!-- Inner content body -->
          <div class="main-body__body">
            <ng-content select="[slot=content]"></ng-content>
          </div>

          <!-- Inner footer -->
          <div class="main-body__footer" 
               [style.flex-basis.px]="effectiveInnerFooterHeight()">
            <ng-content select="[slot=inner-footer]"></ng-content>
          </div>
        </div>

        <!-- Right sidebar navigation -->
        <div class="right-navigation" 
             [class]="rightNavigationClasses()"
             [style.flex-basis.px]="rightNavigationWidth()">
          <ng-content select="[slot=right-navigation]"></ng-content>
        </div>
      </div>

      <!-- Bottom bar -->
      <div class="ui-layout-container__bottom-bar" 
           [style.flex-basis.px]="effectiveBottomBarHeight()">
        <ng-content select="[slot=bottom-bar]"></ng-content>
      </div>
    </div>
  `
})
export class LayoutContainerComponent {
  // Input signals for layout configuration
  leftNavigationState = input<NavigationState>('rail');
  rightNavigationState = input<SidebarState>('hide');
  
  // Show/hide inputs
  showTopBar = input<boolean>(false);
  showInnerHeader = input<boolean>(false);
  showInnerFooter = input<boolean>(false);
  showBottomBar = input<boolean>(false);

  // Size inputs (in pixels) - with sensible defaults
  topBarHeight = input<number>(64);
  innerHeaderHeight = input<number>(56);
  innerFooterHeight = input<number>(48);
  bottomBarHeight = input<number>(56);

  // Custom width overrides
  customLeftWidth = input<number | null>(null);
  customRightWidth = input<number | null>(null);

  // Computed CSS classes for navigation states
  leftNavigationClasses = computed(() => {
    const state = this.leftNavigationState();
    return `left-navigation--${state}`;
  });

  rightNavigationClasses = computed(() => {
    const state = this.rightNavigationState();
    return `right-navigation--${state}`;
  });

  // Computed widths based on state and custom overrides
  leftNavigationWidth = computed(() => {
    const customWidth = this.customLeftWidth();
    if (customWidth !== null) return customWidth;

    const state = this.leftNavigationState();
    switch (state) {
      case 'hide': return 0;
      case 'rail': return 81;
      case 'full': return 320;
      default: return 64;
    }
  });

  rightNavigationWidth = computed(() => {
    const customWidth = this.customRightWidth();
    if (customWidth !== null) return customWidth;

    const state = this.rightNavigationState();
    switch (state) {
      case 'hide': return 0;
      case 'show': return 320;
      default: return 0;
    }
  });

  // Computed effective heights (0 when hidden, configured height when shown)
  effectiveTopBarHeight = computed(() => {
    return this.showTopBar() ? this.topBarHeight() : 0;
  });

  effectiveInnerHeaderHeight = computed(() => {
    return this.showInnerHeader() ? this.innerHeaderHeight() : 0;
  });

  effectiveInnerFooterHeight = computed(() => {
    return this.showInnerFooter() ? this.innerFooterHeight() : 0;
  });

  effectiveBottomBarHeight = computed(() => {
    return this.showBottomBar() ? this.bottomBarHeight() : 0;
  });
}