<ng-container [formGroup]="form">
  <ng-container [ngSwitch]="sectionField.description.type" >
    <ng-container colorSelect *ngSwitchCase="'select-colors'">
      <div class="rs-select-value rs-select-value--colors"  [formGroupName]="sectionField.description.section" *ngrxLet="items$ let items">
        <div class="rs-style-dropdown" [ngClass]="{'show': showDropdownList}" *ngrxLet="colorsPalete$ let colorsPalete" data-dropdown>
          <button  class="btn--dropdown d-flex align-items-center flex-grow-1" (click)="dropdownToggle($event)" data-toggle-dropdown>
            <div class="rs-color-preview"
              [style.background]=
              "!sectionField.description?.var_group ?  colorPickerValue || items[sectionField?.variable?.value]?.value || sectionField.variable.value
              : colorPickerValue || colorsPalete[items[sectionField?.variable?.value]?.value]?.value || gradientColorValue">
            </div>
            <input class="rs-color-input rs-dropdown-input" [ngClass]="{'is-active':!items[sectionField.variable.value]?.name}" (input)="setInputValue($event)" type="text" [formControlName]="sectionField.variable?.name">
            <input class="rs-color-input rs-dropdown-input rs-color-predefined" [ngClass]="{'is-active': items[sectionField.variable.value]?.name} " type="text" (input)="setInputValue($event)" [value]="tmpName || items[sectionField?.variable?.value]?.name">
          </button>
          <div class="rs-style-dropdown__menu" (clickOutside)="hideDropdown(this)" *ngIf="isDropdownOpen">
            <div class="rs-style-dropdown__header">
              <ul class="nav nav--md nav--h nav--tabs" data-colors-dropdown-nav data-check-unsaved-changes>
                <li class="nav__item is-active" [ngClass]="{'is-active': selectTab === 'predefined'}">
                  <a class="nav__link" (click)="selectDropdownTab('predefined')">
                      <span class="nav__link-text">Predefined</span>
                  </a>
                </li>
                <li class="nav__item" [ngClass]="{'is-active':  selectTab === 'picker'}">
                  <a class="nav__link" (click)="selectDropdownTab('picker')" >
                      <span class="nav__link-text">Color Picker</span>
                  </a>
                </li> 
              </ul>
            </div>
            <div class="rs-style-dropdown__content">
              <div class="rs-style-dropdown__tab" [ngClass]="{'is-active': selectTab == 'predefined'}">
                <ng-select
                  class="ng-select--colors"
                  #colorSelect 
                  (change)="changeColorValue(items[$event], 'update_form_from_predefined', colorsPalete)"
                  [searchable]="true"
                  [clearable]="false"
                  [formControlName]="sectionField.variable?.name"
                  appearance="outline"
                  >
                  <ng-template ng-header-tmp class="rs-color-dropdwon-search">
                    <div class="d-flex">
                      <svg class="svg-icon m-r-2x" width="18" height="18" viewBox="0 0 18 18" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0)">
                          <path
                            d="M17.85 16.44L14.31 12.9C15.407 11.5025 16.0022 9.77666 16 8C16 6.41775 15.5308 4.87103 14.6518 3.55544C13.7727 2.23984 12.5233 1.21446 11.0615 0.608963C9.59966 0.00346243 7.99113 -0.154964 6.43928 0.153718C4.88743 0.462399 3.46197 1.22433 2.34315 2.34315C1.22433 3.46197 0.462403 4.88743 0.153721 6.43928C-0.15496 7.99113 0.00346625 9.59966 0.608967 11.0615C1.21447 12.5233 2.23985 13.7727 3.55544 14.6518C4.87103 15.5308 6.41775 16 8 16C9.77666 16.0022 11.5025 15.407 12.9 14.31L16.44 17.85C16.5323 17.9442 16.6581 17.9981 16.79 18C16.9251 17.9997 17.0546 17.9457 17.15 17.85L17.85 17.15C17.8969 17.1035 17.9341 17.0482 17.9594 16.9873C17.9848 16.9264 17.9979 16.861 17.9979 16.795C17.9979 16.729 17.9848 16.6636 17.9594 16.6027C17.9341 16.5418 17.8969 16.4865 17.85 16.44ZM8 2C9.18669 2 10.3467 2.35189 11.3334 3.01118C12.3201 3.67047 13.0892 4.60754 13.5433 5.7039C13.9974 6.80026 14.1162 8.00666 13.8847 9.17054C13.6532 10.3344 13.0818 11.4035 12.2426 12.2426C11.4035 13.0818 10.3344 13.6532 9.17055 13.8847C8.00666 14.1162 6.80026 13.9974 5.7039 13.5433C4.60755 13.0892 3.67047 12.3201 3.01119 11.3334C2.3519 10.3467 2 9.18669 2 8C2 6.4087 2.63214 4.88258 3.75736 3.75736C4.88258 2.63214 6.4087 2 8 2Z"
                            fill="#B9BDC5" />
                        </g>
                        <defs>
                          <clipPath id="clip0">
                            <rect width="18" height="18" fill="white" />
                          </clipPath>
                        </defs>
                      </svg>
                    </div>
                    <input class="ng-dropdown-search-input" style="width: 100%; line-height: 24px" type="text"
                      placeholder="Search..." (input)="colorSelect.filter($event.target.value)" />
                  </ng-template>
            
                  <ng-container *ngFor="let item of items | keyvalue: asIsOrder">
                    <ng-option *ngIf="item.value.type !== 'gradientColor' && item.value.type !== 'hiddenlist'"
                      [value]="item.value.id">
                      <div class="item-value-container dropdown-item">
                        <ng-container *ngIf="!item.value.gradient else gradientPreview">
                          <div class="rs-color-preview" data-active-option-color
                            [ngStyle]="{'background': sectionField.description?.var_group ? colorsPalete[item.value.value]?.value || item.value?.value : item.value?.value}">
                          </div>
                        </ng-container>
                        <ng-template #gradientPreview>
                          <div class="rs-color-preview rs-color-preview--gradient" data-active-option-gradient
                            [style.background]="
                                      item.value.gradient[2] === 'horizontal' ?
                                      'linear-gradient(90deg, ' +  colorsPalete[item.value.gradient[0]].value +'  0%  , ' +  colorsPalete[item.value.gradient[1]].value +' 100% )' :
                                      'linear-gradient(0deg, ' +  colorsPalete[item.value.gradient[0]].value +'  0%  , ' +  colorsPalete[item.value.gradient[1]].value +' 100% )'"></div>
                        </ng-template>
                        <div class="rs-selected-value">{{ item.value.name }}</div>
                      </div>
                    </ng-option>
                  </ng-container>
            
                </ng-select>
              </div>
              <div class="rs-style-dropdown__tab" [ngClass]="{'is-active': selectTab == 'picker'}">
                <div class="rs-color-picker-value"
                  [(colorPicker)]="colorPickerValue || colorsPalete[sectionField.variable.value]?.value || colorsPalete[items[sectionField.variable.value]?.value]?.value ||  sectionField.variable.value"
                  [cpAlphaChannel]="'enabled'" [cpWidth]="'300px'" [cpToggle]="'true'" cpType="'fixed'" [cpDialogDisplay]="'inline'"
                  cpPosition="bottom" cpOutputFormat="auto"
                  (colorPickerChange)="changeColorValue($event, 'update_form_from_picker', colorsPalete)">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ng-container>

    <ng-container *ngSwitchCase="'select'" [formGroupName]="sectionField.description.section">
      <div class="rs-select-value" *ngrxLet="items$ let items">
        <ng-select
          class="rs-select-dropdown"
          (change)="changeColorValue(items[$event])"
          [searchable]="true"
          [clearable]="false"
          [formControlName]="sectionField.variable.name"
          appearance="outline">
          <ng-option *ngFor="let item of items | keyvalue: asIsOrder" [value]="item.value.id">
            <div class="item-value-container">
              <div class="rs-selected-value">{{ item.value.name }}</div>
            </div>
          </ng-option>
        </ng-select>
      </div>
    </ng-container>

    <ng-container *ngSwitchCase="'font'"  [formGroupName]="sectionField.description.section">
      <div class="form-check form-check--sm">
        <label class="m-b-0x">
          <input
            name="selectFontFace"
            class="group-radio form-radio"
            type="radio"
            value="google"
            [checked]="googleFont$"
            (input)="changesDetect(); selectFontFace();">
            <span class="form-indicator"></span>
            <span class="form-text">{{sectionField.description.name}}</span>
        </label>
      </div>
      
      <div class="rs-select-value rs-font-select" *ngrxLet="fontsItems$ let items">
        <ng-select
          class="rs-select-dropdown"
          #select
          (change)="changesDetect()"
          [items]= "fontsItems$ | async"
          [searchable]="false"
          [clearable]="false"
          [formControlName]="sectionField.variable.name"
          appearance="outline"
          >
          <ng-template ng-header-tmp class="rs-style-dropdown-search">
            <div class="d-flex">
              <svg class="svg-icon m-r-2x" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0)">
                  <path d="M17.85 16.44L14.31 12.9C15.407 11.5025 16.0022 9.77666 16 8C16 6.41775 15.5308 4.87103 14.6518 3.55544C13.7727 2.23984 12.5233 1.21446 11.0615 0.608963C9.59966 0.00346243 7.99113 -0.154964 6.43928 0.153718C4.88743 0.462399 3.46197 1.22433 2.34315 2.34315C1.22433 3.46197 0.462403 4.88743 0.153721 6.43928C-0.15496 7.99113 0.00346625 9.59966 0.608967 11.0615C1.21447 12.5233 2.23985 13.7727 3.55544 14.6518C4.87103 15.5308 6.41775 16 8 16C9.77666 16.0022 11.5025 15.407 12.9 14.31L16.44 17.85C16.5323 17.9442 16.6581 17.9981 16.79 18C16.9251 17.9997 17.0546 17.9457 17.15 17.85L17.85 17.15C17.8969 17.1035 17.9341 17.0482 17.9594 16.9873C17.9848 16.9264 17.9979 16.861 17.9979 16.795C17.9979 16.729 17.9848 16.6636 17.9594 16.6027C17.9341 16.5418 17.8969 16.4865 17.85 16.44ZM8 2C9.18669 2 10.3467 2.35189 11.3334 3.01118C12.3201 3.67047 13.0892 4.60754 13.5433 5.7039C13.9974 6.80026 14.1162 8.00666 13.8847 9.17054C13.6532 10.3344 13.0818 11.4035 12.2426 12.2426C11.4035 13.0818 10.3344 13.6532 9.17055 13.8847C8.00666 14.1162 6.80026 13.9974 5.7039 13.5433C4.60755 13.0892 3.67047 12.3201 3.01119 11.3334C2.3519 10.3467 2 9.18669 2 8C2 6.4087 2.63214 4.88258 3.75736 3.75736C4.88258 2.63214 6.4087 2 8 2Z" fill="#B9BDC5" />
                </g>
                <defs>
                  <clipPath id="clip0">
                    <rect width="18" height="18" fill="white" />
                  </clipPath>
                </defs>
              </svg>
            </div>
            <input class="ng-dropdown-search-input"style="width: 100%; line-height: 24px" type="text" placeholder="Search..." (input)="select.filter($event.target.value)"/>
          </ng-template>
        </ng-select>
      </div>
    </ng-container>

    <ng-container *ngSwitchCase="'custom-font'" [formGroupName]="sectionField.description.section">
      <div class="form-check form-check--sm" *ngIf="sectionName == 'Font Family'">
        <label class="m-b-0x">
          <input
            name="selectFontFace"
            class="group-radio form-radio"
            type="radio"
            value="custom"
            [checked]="customFont$"
            (input)="changesDetect();"
            (change)="selectFontFaceCustom();">
            <span class="form-indicator"></span>
            <span class="form-text">{{sectionField.description.name}}</span>
        </label>
      </div>
      
      <div class="input-group input-group--xs input-group--number input-group--styles-app" [ngClass]="{'rs-font-input': sectionName == 'Font Family'}">
        <input
          [formControlName]="sectionField.variable.name"
          class="form-control form-control--xs rs-font-input-value"
          type="text"
          (input)="changesDetect()">
      </div>
    </ng-container>

    <ng-container *ngSwitchCase="'input'" [formGroupName]="sectionField.description.section">
      <div class="input-group input-group--xs input-group--number input-group--styles-app" [ngClass]="{'rs-font-input': sectionName == 'Font Family'}">
        <input
          [formControlName]="sectionField.variable.name"
          class="form-control form-control--xs"
          type="text"
          (input)="changesDetect()">
      </div>
    </ng-container>

    <ng-container *ngSwitchCase="'size'" [formGroupName]="sectionField.description.section">
      <div class="input-group input-group--xs input-group--number input-group--styles-app">
          <input type="number" class="form-control form-control--xs form-control--number"
            [formControlName]="sectionField.variable.name"
            min="1"
            max="999"
            (change)="setInputValue($event); changesDetect()"
            oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
            maxlength="3"
          >
          <div class="input-group__addon input-group__addon--number">{{sectionField.description.append}}</div>
          <div class="input-group__buttons">
            <button class="d-flex" type="button" onclick="this.closest('.input-group').querySelector('input[type=number]').stepUp();this.closest('.input-group').querySelector('input[type=number]').dispatchEvent(new Event('change'))">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.50009 8.00147L8.50009 8.00146C8.6327 8.00146 8.75987 7.94879 8.85364 7.85502C8.94741 7.76125 9.00009 7.63407 9.00009 7.50146L9.00009 7.00146C9.00089 6.93589 8.98795 6.87087 8.96212 6.81059C8.93629 6.75032 8.89812 6.69611 8.85009 6.65146L6.35009 4.15147C6.3052 4.10363 6.25098 4.06551 6.19078 4.03945C6.13058 4.01339 6.06568 3.99995 6.00009 3.99995C5.93449 3.99995 5.86959 4.01339 5.80939 4.03945C5.74919 4.06551 5.69498 4.10363 5.65009 4.15147L3.15009 6.65147C3.10205 6.69611 3.06389 6.75032 3.03805 6.81059C3.01222 6.87087 2.99929 6.93589 3.00009 7.00147L3.00009 7.50147C3.00009 7.63407 3.05277 7.76125 3.14653 7.85502C3.2403 7.94879 3.36748 8.00147 3.50009 8.00147Z" fill="#B9BDC5"/>
              </svg>
            </button>
            <button class="d-flex"  type="button" onclick="this.closest('.input-group').querySelector('input[type=number]').stepDown();this.closest('.input-group').querySelector('input[type=number]').dispatchEvent(new Event('change'))">
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.50003 4H3.50003C3.36743 4 3.24025 4.05268 3.14648 4.14645C3.05271 4.24021 3.00003 4.36739 3.00003 4.5V5C2.99924 5.06558 3.01217 5.13059 3.038 5.19087C3.06384 5.25115 3.102 5.30535 3.15004 5.35L5.65003 7.85C5.69493 7.89783 5.74914 7.93595 5.80934 7.96201C5.86954 7.98807 5.93444 8.00152 6.00003 8.00152C6.06563 8.00152 6.13053 7.98807 6.19073 7.96201C6.25093 7.93595 6.30514 7.89783 6.35003 7.85L8.85004 5.35C8.89807 5.30535 8.93623 5.25115 8.96207 5.19087C8.9879 5.13059 9.00083 5.06558 9.00003 5V4.5C9.00003 4.36739 8.94736 4.24021 8.85359 4.14645C8.75982 4.05268 8.63264 4 8.50003 4Z" fill="#B9BDC5"/>
              </svg>
            </button>
          </div>
      </div>
    </ng-container>

  </ng-container>
</ng-container>
