import { Component, Input, Output, EventEmitter, forwardRef, Optional, ElementRef, ViewEncapsulation, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { RadioGroupComponent } from './radio-group.component';
import { HostBinding } from '@angular/core';

@Component({
    selector: 'farris-radio-button',
    template: `
    <label [class]="'btn btn-'+type" [class.active]="isGroupModel()" [class.disabled]="disabled">
        <input class="custom-control-input" [name]="name" [value]="label"
        [ngModel]="model" (ngModelChange)="changeModelHandler()" type="radio" [disabled]="disabled">
          <ng-content>
          </ng-content>
    </label>
  `,
    styles: [
        `
        .farris-radio-button>.btn{
            margin-left:-1px
          }
          .farris-radio-button>.btn.active, .farris-radio-button>.btn:hover{
            position: relative;
          }
      `
    ],
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => RadioButtonComponent),
        multi: true,
    }],
    encapsulation: ViewEncapsulation.None
})
export class RadioButtonComponent implements ControlValueAccessor, OnInit {

    /* radio 原生name 用于多个radio单选使用 */
    // get name() {

    // }
    name = '';

    /* 按钮类型 */
    @Input()
    type = 'secondary';

    /* radio 值 */
    @Input()
    get model(): any {
        if (this.hasParent(this.el.nativeElement)) {
            return this.radioGroup.model;
        }
        return this.nyModel;
    }

    set model(model: any) {
        this.nyModel = model;
    }


    @Input()
    id: string;

    /* radio 值 */
    @Input()
    label: any = '';

    /* 禁用 */
    @Input()
    disabled: boolean;

    nyModel: any;

    @Output()
    modelChange = new EventEmitter<any>();


    @HostBinding('class.farris-radio-button')
    get farrisRadioButtonClass() { return true; }

    constructor(
        @Optional() public radioGroup: RadioGroupComponent,
        private el: ElementRef
    ) {
    }

    ngOnInit() {
        this.name = this.hasParent(this.el.nativeElement) ? this.radioGroup.name : '';
    }

    isGroupModel() {
        return this.label === this.radioGroup.model;
    }

    changeModelHandler() {
        // 父元素获取label  子元素再从父元素获取model
        if (this.hasParent(this.el.nativeElement)) {
            return this.radioGroup.changeModel(this.label);
        }
        this.model = this.label;
        this.modelChange.emit(this.model);
        this.controlChange(this.label);
    }

    /* 是否存在父元素  存在即单选组*/
    hasParent(element: any) {
        return element.parentElement.classList.contains('farris-input-wrap') || element.parentElement.classList.contains('btn-group');
    }

    writeValue(value: any): void {
        this.model = value;
    }

    registerOnChange(fn: Function): void {
        this.controlChange = fn
    }

    registerOnTouched(fn: Function): void {
        this.controlTouch = fn
    }

    private controlChange: Function = () => { }
    private controlTouch: Function = () => { }

}