import { Component, Input, OnInit } from '@angular/core';
import { JsonSchemaFormService } from '../json-schema-form.service';


@Component({
  // tslint:disable-next-line:component-selector
  selector: 'section-widget',
  template: `
    <div *ngIf="containerType === 'div'"
      [class]="options?.htmlClass || ''"
      [class.expandable]="options?.expandable && !expanded"
      [class.expanded]="options?.expandable && expanded">
      <label *ngIf="sectionTitle"
        class="legend"
        [class]="options?.labelHtmlClass || ''"
        [innerHTML]="sectionTitle"
        (click)="toggleExpanded()"></label>
      <root-widget *ngIf="expanded"
        [dataIndex]="dataIndex"
        [layout]="layoutNode.items"
        [layoutIndex]="layoutIndex"
        [isFlexItem]="getFlexAttribute('is-flex')"
        [isOrderable]="options?.orderable"
        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
        [style.align-content]="getFlexAttribute('align-content')"
        [style.align-items]="getFlexAttribute('align-items')"
        [style.display]="getFlexAttribute('display')"
        [style.flex-direction]="getFlexAttribute('flex-direction')"
        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
        [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
    </div>
    <fieldset *ngIf="containerType === 'fieldset'"
      [class]="options?.htmlClass || ''"
      [class.expandable]="options?.expandable && !expanded"
      [class.expanded]="options?.expandable && expanded"
      [disabled]="options?.readonly">
      <legend *ngIf="sectionTitle"
        class="legend"
        [class]="options?.labelHtmlClass || ''"
        [innerHTML]="sectionTitle"
        (click)="toggleExpanded()"></legend>
      <div *ngIf="options?.messageLocation !== 'bottom'">
        <p *ngIf="options?.description"
        class="help-block"
        [class]="options?.labelHelpBlockClass || ''"
        [innerHTML]="options?.description"></p>
      </div>
      <root-widget *ngIf="expanded"
        [dataIndex]="dataIndex"
        [layout]="layoutNode.items"
        [layoutIndex]="layoutIndex"
        [isFlexItem]="getFlexAttribute('is-flex')"
        [isOrderable]="options?.orderable"
        [class.form-flex-column]="getFlexAttribute('flex-direction') === 'column'"
        [class.form-flex-row]="getFlexAttribute('flex-direction') === 'row'"
        [style.align-content]="getFlexAttribute('align-content')"
        [style.align-items]="getFlexAttribute('align-items')"
        [style.display]="getFlexAttribute('display')"
        [style.flex-direction]="getFlexAttribute('flex-direction')"
        [style.flex-wrap]="getFlexAttribute('flex-wrap')"
        [style.justify-content]="getFlexAttribute('justify-content')"></root-widget>
      <div *ngIf="options?.messageLocation === 'bottom'">
        <p *ngIf="options?.description"
        class="help-block"
        [class]="options?.labelHelpBlockClass || ''"
        [innerHTML]="options?.description"></p>
      </div>
    </fieldset>`,
  styles: [`
    .legend { font-weight: bold; }
    .expandable > legend:before, .expandable > label:before  { content: '▶'; padding-right: .3em; }
    .expanded > legend:before, .expanded > label:before  { content: '▼'; padding-right: .2em; }
  `],
})
export class SectionComponent implements OnInit {
  options: any;
  expanded = true;
  containerType: string;
  @Input() layoutNode: any;
  @Input() layoutIndex: number[];
  @Input() dataIndex: number[];

  constructor(
    private jsf: JsonSchemaFormService
  ) { }

  get sectionTitle() {
    return this.options.notitle ? null : this.jsf.setItemTitle(this);
  }

  ngOnInit() {
    this.jsf.initializeControl(this);
    this.options = this.layoutNode.options || {};
    this.expanded = typeof this.options.expanded === 'boolean' ?
      this.options.expanded : !this.options.expandable;
    switch (this.layoutNode.type) {
      case 'fieldset': case 'array': case 'tab': case 'advancedfieldset':
      case 'authfieldset': case 'optionfieldset': case 'selectfieldset':
        this.containerType = 'fieldset';
      break;
      default: // 'div', 'flex', 'section', 'conditional', 'actions', 'tagsinput'
        this.containerType = 'div';
      break;
    }
  }

  toggleExpanded() {
    if (this.options.expandable) { this.expanded = !this.expanded; }
  }

  // Set attributes for flexbox container
  // (child attributes are set in root.component)
  getFlexAttribute(attribute: string) {
    const flexActive: boolean =
      this.layoutNode.type === 'flex' ||
      !!this.options.displayFlex ||
      this.options.display === 'flex';
    if (attribute !== 'flex' && !flexActive) { return null; }
    switch (attribute) {
      case 'is-flex':
        return flexActive;
      case 'display':
        return flexActive ? 'flex' : 'initial';
      case 'flex-direction': case 'flex-wrap':
        const index = ['flex-direction', 'flex-wrap'].indexOf(attribute);
        return (this.options['flex-flow'] || '').split(/\s+/)[index] ||
          this.options[attribute] || ['column', 'nowrap'][index];
      case 'justify-content': case 'align-items': case 'align-content':
        return this.options[attribute];
    }
  }
}