import { Component, Input } from '@angular/core';
import { BrandingColors } from '@core/typings/branding.typing';

@Component({
  selector: 'gc-branding',
  templateUrl: './gc-branding.component.html',
  styleUrls: ['./gc-branding.component.scss']
})
export class GcBrandingComponent {
  @Input()
  set branding (branding: BrandingColors) {
    this.styleElement.innerHTML = branding ? `
      .primary-border {
        border-color: ${branding.brandPrimary} !important;
      }

      .text-primary {
        color: ${branding.brandPrimary} !important;
      }
      .text-info {
        color: ${branding.brandSecondary} !important;
      }
      .nav-avatar-img {
        height: 53px;
        width: 53px;
        border: 2px solid ${branding.brandPrimary}; /*Client Color*/
        margin-top: 2px;
        float: left;
        margin-right: 15px;
      }
    
      .side-menu a.active, .side-menu li.hover a {
        color: ${branding.brandPrimary} !important;
        background-color: transparent;
      }

      .side-menu a.active .gcm-svg-sidemenu {
        fill: ${branding.brandPrimary}; /*Client Color*/
      }
      
      .side-menu a.active .gcm-icon-sidemenu {
        color: ${branding.brandPrimary}; /*Client Color*/
      }

      .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
        border-bottom-color: transparent;
        border-top: 2px solid ${branding.brandPrimary};
      }

      .sidemenu-noti-pill {
        background: ${branding.brandSecondary};
      }

      .signout-panel {
        background: ${branding.brandSecondary};
      }

      .pagination>.active>a,
      .pagination>.active>span,
      .pagination>.active>a:hover,
      .pagination>.active>span:hover,
      .pagination>.active>a:focus,
      .pagination>.active>span:focus {
          background-color: ${branding.brandPrimary};
          border-color: ${branding.brandPrimary};
      }
      .pagination>li>a, .pagination>li>span {
          color:${branding.brandPrimary};
      }
      .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
         color:${branding.brandPrimary};
      }

      .fs-icon {
        color: ${branding.brandPrimary};
      }

      .side-menu-utility a.active .svg-sidemenu {
        fill: ${branding.brandPrimary}; !important;
      }

      .side-menu-utility a.active .icon-sidemenu {
        color: ${branding.brandPrimary}; !important;
      }

      .side-utility-bar-cover {
        background: linear-gradient(230deg, rgba(188, 189, 189, 0.39), rgba(54, 53, 53, 0.43) 140%) no-repeat border-box, ${branding.brandUtility} no-repeat border-box !important;
      }

      .side-utility-bar.nav-toggle > .help-utility-container > a {
        color: ${branding.brandPrimary} !important;
      }
      .gcm-client-color-bg-primary {
        background: ${branding.brandPrimary} !important;
      }

      /* Stepper */

      .theme-yc-default .yc-stepper.static > li.active > a, .theme-yc-default .yc-stepper.static > li.active > a:hover, .theme-yc-default .yc-stepper.static > li.active > a:focus {
        background-color: ${branding.brandPrimary};
      }
      .theme-yc-default .yc-stepper.static > li.active > a:after {
        border-left-color: ${branding.brandPrimary};
      }

      /* BUTTONS */


      /* Primary */

      .theme-yc-default .btn.btn-primary {
        background-color: ${branding.brandPrimary};
        border: 1px solid ${branding.brandPrimary};
      }
      .theme-yc-default .btn:not(.split-toggle).btn-primary:focus,
      .theme-yc-default .btn:not(.split-toggle).btn-primary:hover,  {
        background-color: ${branding.brandPrimary};
        border-color: ${branding.brandPrimary};
      }

      .theme-yc-default .btn.btn-primary.split-toggle .left-toggle:focus,
      .theme-yc-default .btn.btn-primary.split-toggle .right-toggle:focus
      .theme-yc-default .btn.btn-primary.split-toggle .left-toggle:hover,
      .theme-yc-default .btn.btn-primary.split-toggle .right-toggle:hover {
        background-color: ${branding.brandPrimary};
        border-color: ${branding.brandPrimary};
        color: white;
      }

      .theme-yc-default .btn:not(.split-toggle).btn-primary:focus,
      .theme-yc-default .btn:not(.split-toggle).btn-primary:hover {
        background-color: ${branding.brandPrimary};
        border-color: ${branding.brandPrimary};
      }

      .theme-yc-default .btn.btn-primary.split-toggle .left-toggle:focus,
      .theme-yc-default .btn.btn-primary.split-toggle .left-toggle:hover,
      .theme-yc-default .btn.btn-primary.split-toggle .right-toggle:focus,
      .theme-yc-default .btn.btn-primary.split-toggle .right-toggle:hover {
        background-color: ${branding.brandPrimary};
        border-color: ${branding.brandPrimary};
        color: white;
      }

      .theme-yc-default .btn:not(.split-toggle).btn-primary.disabled:hover,
      .theme-yc-default .btn:not(.split-toggle).btn-primary:disabled:hover {
        background-color: ${branding.brandPrimary};
        border-color: ${branding.brandPrimary};
      }

      .theme-yc-default .btn:not(.split-toggle).btn-primary:not(.no-click):focus,
      .theme-yc-default .btn:not(.split-toggle).btn-primary:not(.no-click):hover,
      .theme-yc-default .btn:not(.split-toggle).btn-primary:not(.no-click).disabled:hover,
      .theme-yc-default .btn:not(.split-toggle).btn-primary:not(.no-click):disabled:hover,
      .theme-yc-default .btn:not(.split-toggle).btn-primary:not(.no-click).disabled:hover,
      .theme-yc-default .btn:not(.split-toggle).btn-primary:not(.no-click):disabled:hover {
        background-color: ${branding.brandPrimary};
        border-color: ${branding.brandPrimary};
      }

      /* Secondary */

      .theme-yc-default .btn.btn-secondary,
      .theme-yc-default .btn.btn-secondary {
        color: white;
        background-color: ${branding.brandSecondary};
        border: 1px solid ${branding.brandSecondary};
      }
      .theme-yc-default .btn:not(.split-toggle)btn-secondary:focus,
      .theme-yc-default .btn:not(.split-toggle)btn-secondary:hover,  {
        background-color: ${branding.brandSecondary};
        border-color: ${branding.brandSecondary};
      }
      .theme-yc-default .btn.btn-secondary:not(.no-click):not(.split-toggle):focus, .theme-yc-default .btn.btn-secondary:not(.no-click):not(.split-toggle):hover, .theme-yc-default .btn.btn-secondary:not(.no-click):not(.split-toggle):focus, .theme-yc-default .btn.btn-secondary:not(.no-click):not(.split-toggle):hover {
        background-color: ${branding.brandSecondary};
        border-color: ${branding.brandSecondary};
        color: white;
      }
      .theme-yc-default .btn.btn-secondary.split-toggle .left-toggle:focus,
      .theme-yc-default .btn.btn-secondary.split-toggle .right-toggle:focus
      .theme-yc-default .btn.btn-secondary.split-toggle .left-toggle:hover,
      .theme-yc-default .btn.btn-secondary.split-toggle .right-toggle:hover {
        background-color: ${branding.brandSecondary};
        border-color: ${branding.brandSecondary};
        color: white;
      }

      .theme-yc-default .btn:not(.split-toggle)btn-secondary:focus,
      .theme-yc-default .btn:not(.split-toggle)btn-secondary:hover {
        background-color: ${branding.brandSecondary};
        border-color: ${branding.brandSecondary};
      }

      .theme-yc-default .btn.btn-secondary.split-toggle .left-toggle:focus,
      .theme-yc-default .btn.btn-secondary.split-toggle .left-toggle:hover,
      .theme-yc-default .btn.btn-secondary.split-toggle .right-toggle:focus,
      .theme-yc-default .btn.btn-secondary.split-toggle .right-toggle:hover {
        background-color: ${branding.brandSecondary};
        border-color: ${branding.brandSecondary};
        color: white;
      }

      .theme-yc-default .btn:not(.split-toggle)btn-secondary.disabled:hover,
      .theme-yc-default .btn:not(.split-toggle)btn-secondary:disabled:hover {
        background-color: ${branding.brandSecondary};
        border-color: ${branding.brandSecondary};
      }

      .theme-yc-default .btn:not(.split-toggle)btn-secondary:not(.no-click):focus,
      .theme-yc-default .btn:not(.split-toggle)btn-secondary:not(.no-click):hover,
      .theme-yc-default .btn:not(.split-toggle)btn-secondary:not(.no-click).disabled:hover,
      .theme-yc-default .btn:not(.split-toggle)btn-secondary:not(.no-click):disabled:hover,
      .theme-yc-default .btn:not(.split-toggle)btn-secondary:not(.no-click).disabled:hover,
      .theme-yc-default .btn:not(.split-toggle)btn-secondary:not(.no-click):disabled:hover {
        background-color: ${branding.brandSecondary};
        border-color: ${branding.brandSecondary};
      }
  
      .theme-yc-default .btn.btn-secondary:not(.no-click):focus, .theme-yc-default .btn.btn-secondary:not(.no-click):hover, .theme-yc-default .btn.btn-secondary:not(.no-click):focus, .theme-yc-default .btn.btn-secondary:not(.no-click):hover,
      .theme-yc-default .btn.btn-secondary:not(.no-click).disabled:hover, .theme-yc-default .btn.btn-secondary:not(.no-click):disabled:hover, .theme-yc-default .btn.btn-secondary:not(.no-click).disabled:hover, .theme-yc-default .btn.btn-secondary:not(.no-click):disabled:hover {
        color: white;
        background-color: ${branding.brandSecondary};
      }

      .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
        color: white;
        background-color: ${branding.brandSecondary};
      }

      .theme-yc-default .btn.btn-secondary:not(.no-click):active.focus, .theme-yc-default .btn.btn-secondary:not(.no-click):active:focus, .theme-yc-default .btn.btn-secondary:not(.no-click):active.focus, .theme-yc-default .btn.btn-secondary:not(.no-click):active:focus {
        color: white;
        background-color: ${branding.brandSecondary};
      }

      .theme-yc-default .btn.btn-info, .theme-yc-default .btn.btn-info {
        background-color: ${branding.brandSecondary};
        border: 1px solid ${branding.brandSecondary};
      }
      .theme-yc-default yc-nonprofit-block-display .clear-org,
      .theme-yc-default .yc-accordion-stepper .clear-org,
      .theme-yc-default gc-applicant-block .clear-applicant {
        background-color: ${branding.brandSecondary};
      }

      .theme-yc-default .btn.btn-info:focus, .theme-yc-default .btn.btn-info:hover, .theme-yc-default .btn.btn-info:focus, .theme-yc-default .btn.btn-info:hover {
        background-color: ${branding.brandSecondary};
        border-color: ${branding.brandSecondary};
      }
      .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle {
        background-color: ${branding.brandSecondary};
        border-color: ${branding.brandSecondary};
      }

      /* Card Navigation */
      .theme-yc-default yc-card-navigation .wrapper .title-icon {
        color: ${branding.brandPrimary};
      }
      .theme-yc-default yc-card-navigation .wrapper .title {
        color: #4e5657;
      }


      .section-wrapper .active-item {
        border-left: 5px solid ${branding.brandPrimary} !important;
      }

      .calendar-deadline-icon {
        color: ${branding.brandSecondary};
      }

      .history-activity-icon {
        color: ${branding.brandSecondary};
      }

      body > modal-container > div > div > gc-view-email-modal > button.manager-email {
        background-color: ${branding.brandPrimary}!important;
      }

      ` : '';
  }

  loading: boolean;
  brandingString: string;
  styleElement: HTMLStyleElement;

  constructor () {
    this.styleElement = document.createElement('style');
    this.styleElement.id = 'custom-branding';
    this.styleElement.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(this.styleElement);
  }
}