import {Component, Input} from '@angular/core';
import {ButtonsCustomization} from '../../openaireLibrary/connect/community/CustomizationOptions';


@Component({
  selector: 'customize-buttons',
  template: `
 
      <div class="">
        <border [style]="buttons.borderStyle" [width]=
          "buttons.borderWidth" [radius]=
                  "buttons.borderRadius" (borderChange)=
                  " buttons.borderStyle = $event.style;
                        buttons.borderRadius = $event.radius;
                        buttons.borderWidth = $event.width; "></border>
        <div class="uk-grid uk-child-width-1-2 uk-margin-top" >
          <div class="">
            <div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left">Colors</div>
            <color [color]="buttons.color" (colorChange)=
              " buttons.color = $event; "
                   label="Fonts"  [light]="!light"
                   ></color>
            <color [color]="buttons.backgroundColor" (colorChange)=
              " buttons.backgroundColor = $event; " [light]="light"
                   label="Background" ></color>
            <color [color]="buttons.borderColor" (colorChange)=
              " buttons.borderColor = $event; " [light]="light"
                   label="Border"
                   
            ></color>
          </div>
          <div>
            <div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left">Colors on hover</div>
            <div class="">
            <color [color]="buttons.onHover.color" (colorChange)=
              " buttons.onHover.color = $event;" label="Fonts" [light]="!light"
            ></color>
            <color [color]="buttons.onHover.backgroundColor"
                   (colorChange)=
                     " buttons.onHover.backgroundColor = $event;" [light]="light"
                   label="Background" ></color>
            <color [color]="buttons.onHover.borderColor" (colorChange)=
              " buttons.onHover.borderColor = $event;" [light]="light"
                   label="Border" ></color>
            </div>
              </div>
          </div>
      </div>
     
      
`,
  styles:[` `]

})

export class CustomizeButtonsComponent {
  @Input() buttons:ButtonsCustomization;
  @Input() light:boolean;
  constructor() {
  }

}