import { FormGroup,Validators,FormBuilder,FormArray,FormControl } from '@angular/forms';
import { FoldersService } from '../folders.service';
import { cdkDragDrop,moveItemInArray,transferArrayItem } from '@angular/cdk/drag-drop';
import { HttpHeaders } from '@angular/common/http';
import {HttpClient } from '@angular/common/http';

import { Component,OnInit } from '@angular/core';
import { DndDropEvent,DropEffect} from 'ngx-drag-drop';
import { field,value } from '../global.model';
import { activatedRoute } from '@angular/router';
import Swal from 'sweetalert2/dist/sweetalert2.js'

import 'sweetalert2/src/sweetalert2.scss'
import { PanelBarItemModel } from '@progress/kendo-angular-layout';
import swal from 'sweetalert2';

@Component({
  selector: 'app-formadd',templateUrl: './formadd.component.html',styleUrls: ['./formadd.component.css']
})
export class FormaddComponent implements OnInit {

  paginaForm = new FormGroup({
    form_name: new FormControl(''),elementen: new FormGroup({
      textbox: new FormControl(''),email: new FormControl(''),number: new FormControl(''),date: new FormControl(''),datetime: new FormControl(''),textarea: new FormControl(''),checkbox: new FormControl('')      
    })
  });

  constructor(private fb: FormBuilder,private bs: FoldersService,private http: HttpClient) {
    this.createForm();
  }

  createForm(){
    this.paginaForm = this.fb.group({
      form_name: ['',Validators.required],elementen: this.fb.group({
      textbox: ['',],email: ['',number: ['',date: ['',datetime: ['',textarea: ['',checkbox: ['',]
    })
  });
  }
  ngOnInit() {
    this.paginaForm = this.fb.group({
      forms: this.fb.array([]),// elementen : this.fb.group({
      //   forms2: this.fb.array([])
      // })
    });

  }
  value:value={
    label:"",value:""
  };
  success = false;
  items = [
    {
      title: "Bestanden",children: [
        { title: "Opslaan",icon:"save"},{ title: "Open",icon:"folder-open" },{ title: "Import Formulier",icon:"download" },{ title: "Export Formulier",icon:"bac" },{ title: "Nieuw Formulier",icon:"file-add" },]
    }
  ];

  fieldmodels:Array<field>=[
    
     { "title": "Textbox","type": "text","icon": "textbox","description": "Enter your name","placeholder": "Enter your name","classname": "form-control","subtype": "text","regex" : "","handle":true
    },{
      
      "title": "Email","type": "email","icon": "email-box","required": true,"description": "Enter your email","placeholder": "Enter your email","regex" : "^([a-zA-Z0-9_.-]+)@([a-zA-Z0-9_.-]+)\.([a-zA-Z]{2,5})$","errorText": "Please enter a valid email",{
      "type": "number","title": "Number","icon": "custom-format","description": "Age","placeholder": "Enter your age","value": "20","min": 12,"max": 90
    },{
      "type": "date","icon":"calendar-date","title": "Date","placeholder": "Date","classname": "form-control"
    },{
      "type": "datetime-local","title": "DateTime","placeholder": "Date Time",{
      "type": "textarea","icon":"textarea","title": "Textarea" 
    },{
      "type": "checkbox","title": "Checkbox","icon":"checkbox-checked","description": "Checkbox","inline": true,"values": [
        {
          "label": "Option 1","value": "option-1"
        },{
          "label": "Option 2","value": "option-2"
        }
      ]
    }
  ];

  modelFields:Array<field>=[];
  model:any = {
    theme:{
      bgColor:"ffffff",textColor:"555555",bannerImage:""
    },attributes:this.modelFields
  };

  report = false;
  reports:any = [];


  onDragStart(event:DragEvent) {
    console.log("drag started",JSON.stringify(event,null,2));
  }
  
  onDragEnd(event:DragEvent) {
    console.log("drag ended",2));
  }
  
  onDraggableCopied(event:DragEvent) {
    console.log("draggable copied",2));
  }
  
  onDraggableLinked(event:DragEvent) {
    console.log("draggable linked",2));
  }
    
   onDragged( item:any,list:any[],effect:DropEffect ) {
    if( effect === "move" ) {
      const index = list.indexOf( item );
      list.splice( index,1 );
    }
  }
      
  onDragCanceled(event:DragEvent) {
    console.log("drag cancelled",2));
  }
  
  onDragover(event:DragEvent) {
    console.log("dragover",2));
  }
  
  onDrop( event:DndDropEvent,list?:any[] ) {
    if( list && (event.dropEffect === "copy" || event.dropEffect === "move") ) {
      
      if(event.dropEffect === "copy")
      event.data.name = event.data.type+'-'+new Date().getTime();
      let index = event.index;
      if( typeof index === "undefined" ) {
        index = list.length;
      }
      list.splice( index,event.data );
    }
  }

  initReport(){
    this.report = true; 
    let input = {
      id:this.model._id
    }
  }

  toggleValue(item){
    item.selected = !item.selected;
  }

  onFormSubmit() {
    alert(JSON.stringify(this.paginaForm.value));
  }

  addFolders(form_name,textbox,email,number,date,datetime,textarea,checkbox) {
    this.bs.addFolders(form_name,checkbox);
  }

  addPagina() {
    (<FormArray>this.paginaForm.get('forms')).push(this.fb.group({
      form_name: [],// (<FormArray>this.elementen.get('forms2')).push(this.fb.group([
      //   textbox: [],//   email: [],//   phone: [],//   number: [],//   date: [],//   datetime: [],//   textarea: [],//   checkbox: [],//   radio: [],//   autocomplete: [],//   file: []
      // ]))
    }));
  }

  get forms() {
    return (<FormArray>this.paginaForm.get('forms')).controls;
  }

  removePagina(i: number) {
    (<FormArray>this.paginaForm.get('forms')).removeAt(i);
  }
  }

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <!-- <div *ngIf="model && !report" class="padding20 white-bg">
      <div class="spacer30"></div> -->
    <div class="row" id="formulier">
      <div class="col-md-9" id="add">
        <div class="add">
        <div class="container-fluid">
          <form [formGroup]="paginaForm" (submit)="onFormSubmit()">
           <div formArrayName="forms">
            <div class="geheel" *ngFor="let form of forms; let i = index;" [formGroupName]="i">
              <div class="row" id="geheel-element">
                <div class="col-md-12">
                  <div class="title">
                    <mat-toolbar class="toolbar" color="warn">
                      <h2 class="pagina-naam"><input class="form-control" placeholder="Formulier Naam" type="text"
                          formControlName="form_name" #form_name /></h2>
                    </mat-toolbar>
                  </div>
                </div>
              </div>
                <div class="col-md-12">
                  <div formGroupName="elementen">
                  <div class="element">
                    <!--a dropzone-->
                    <!--to allow dropping content that is not [dndDraggable] set dndAllowExternal to true-->
                    <section class="voeg-element" placeholder="voeg element toe" dndDropzone
                      (dndDragover)="onDragover($event)" (dndDrop)="onDrop($event,model.attributes)" class="dndDropArea"
                      [ngClass]="{'empty':model.attributes.length == 0}" [style.backgroundColor]="model.theme.bgColor"
                      [style.color]="model.theme.textColor">

                      <div class="field" *ngFor="let item of model.attributes;let i= index;"
                        (dndStart)="onDragStart($event)" (dndCanceled)="onDragCanceled($event)"
                        (dndmoved)="onDragged(item,model.attributes,'move')" [dndEffectAllowed]="'all'"
                        [dndDraggable]="item">
                        <div class="row form-group">
                          <div class="fp"><i class="fa fa-ellipsis-v dndHandle" dndHandle></i></div>
                          <div class="col-7">
                            <!-- <i [ngClass]="item.icon" class="fa pull-left"></i>
                      <h5>{{item.label}}
                      <span *ngIf="item.required" class="red">*</span></h5> -->
                            <div *ngIf="item.type=='text'">
                              <label>{{item.label}}</label> <label *ngIf="item.required" class="text-danger">*</label>
                              <input type="text" class="form-control" id="{{item.name}}"
                                placeholder="{{item.placeholder}}" formControlName="textbox" #textbox>
                            </div>
                            <div *ngIf="item.type=='email'">
                              <label>{{item.label}}</label> <label *ngIf="item.required" class="text-danger">*</label>
                              <input type="email" class="form-control" id="{{item.name}}"
                                placeholder="{{item.placeholder}}" formControlName="email" #email>
                            </div>
                            <div *ngIf="item.type=='number'">
                              <label>{{item.label}}</label> <label *ngIf="item.required" class="text-danger">*</label>
                              <input type="number" class="form-control" id="{{item.name}}" min="{{item.min}}"
                                max="{{item.max}}" placeholder="{{item.placeholder}}" formControlName="number" #number>
                            </div>
                            <div *ngIf="item.type=='date'">
                              <label>{{item.label}}</label> <label *ngIf="item.required" class="text-danger">*</label>
                              <input type="date" class="form-control" id="{{item.name}}"
                                placeholder="{{item.placeholder}}" formControlName="date" #date>
                            </div>
                            <div *ngIf="item.type=='datetime-local'">
                              <label>{{item.label}}</label> <label *ngIf="item.required" class="text-danger">*</label>
                              <input type="datetime-local" class="form-control" id="{{item.name}}"
                                placeholder="{{item.placeholder}}" formControlName="datetime" #datetime>
                            </div>
                            <div *ngIf="item.type=='textarea'">
                              <label>{{item.label}}</label> <label *ngIf="item.required" class="text-danger">*</label>
                              <textarea class="form-control" id="{{item.name}}" placeholder="{{item.placeholder}}" formControlName="textarea" #textarea>
                                </textarea>
                            </div>
                                <option *ngFor="let v of item.values" [value]="v.value">{{v.label}}</option>
                              </select>
                              <!-- <small class="form-text text-muted">{{item.description}}</small> -->
                            </div>
                            <div *ngIf="item.type=='checkbox'">
                              <label>{{item.label}}</label> <label *ngIf="item.required" class="text-danger">*</label>
                              <div *ngFor="let v of item.values" class="inline-form-group">
                                <label class="cust-check-bx">
                                  <input type="checkbox" [value]="v.value" name="{{item.name}}"
                                    (click)="toggleValue(v)" formControlName="checkbox" #checkbox>
                                  {{v.label}}
                                  <span class="checkmark"></span>
                                </label>
                              </div>
                            </div>
                          </div>
                          <div class="col-4">
                            <i *ngIf="item.toggle" (click)="item.toggle=false" class="fa fa-chevron-up pull-right"></i>
                            <i *ngIf="!item.toggle" (click)="item.toggle=true"
                              class="fa fa-chevron-down pull-right"></i>
                            <i (click)="removeField(i)" class="fa fa-trash pull-right"></i>
                          </div>
                        </div>
                        <div *ngIf="item.toggle" class="toggle-Wrapper">
                          <div class="form-group">
                            <label>Required</label>
                            <i *ngIf="item.required" (click)="item.required=false" class="fa fa-toggle-on red"></i>
                            <i *ngIf="!item.required" (click)="item.required=true" class="fa fa-toggle-off"></i>
                            <span class="pull-right ucfirst">{{item.type}}</span>
                          </div>
                          <div class="form-group">
                            <label>Label</label>
                            <input class="form-control" type="text" [(ngModel)]="item.label" />
                          </div>
                          <div class="form-group">
                            <label>Name</label>
                            <input class="form-control" type="text" [(ngModel)]="item.name" />
                          </div>
                          <div class="form-group">
                            <label>Placeholder</label>
                            <input class="form-control" type="text" [(ngModel)]="item.placeholder" />
                          </div>
                          <div class="form-group">
                            <label>Regex</label>
                            <input class="form-control" type="text" [(ngModel)]="item.regex" />
                          </div>
                          <div *ngIf="item.regex" class="form-group">
                            <label>Error text</label>
                            <input class="form-control" type="text" [(ngModel)]="item.errorText" />
                          </div>

                          <!-- number -->
                          <div *ngIf="item.type=='number'" class="row">
                            <div class="col-6">
                              <div class="form-group">
                                <label>Min</label>
                                <input class="form-control" type="text" [(ngModel)]="item.min" />
                              </div>
                            </div>
                            <div class="col-6">
                              <div class="form-group">
                                <label>Max</label>
                                <input class="form-control" type="text" [(ngModel)]="item.max" />
                              </div>
                            </div>
                          </div>

                          <!-- radio || checkbox || autocomplete -->
                          <div *ngIf="item.type=='radio'|| item.type=='checkbox' || item.type=='autocomplete'">
                            <div class="row">
                              <div class="col-5">
                                <div class="form-group">
                                  <label>Label</label>
                                </div>
                              </div>
                              <div class="col-5">
                                <div class="form-group">
                                  <label>Value</label>
                                </div>
                              </div>
                              <div class="col-2">
                                <div class="form-group">
                                  <label>action</label>
                                </div>
                              </div>
                            </div>
                            <div *ngFor="let i of item.values; let valueIndex=index;" class="row">
                              <div class="col-5">
                                <div class="form-group">
                                  <input class="form-control" type="text" [(ngModel)]="i.label" />
                                </div>
                              </div>
                              <div class="col-7">
                                <div class="form-group">
                                  <input class="form-control" type="text" [(ngModel)]="i.value" />
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-5">
                                <div class="form-group">
                                  <input class="form-control" type="text" [(ngModel)]="value.label" />
                                </div>
                              </div>
                              <div class="col-7">
                                <div class="form-group">
                                  <input class="form-control" type="text" [(ngModel)]="value.value" />
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </section>
                    <div class="row">
                    <div class="col-md-5" id="verwijder">
                      <button (click)="removePagina(i)">Verwijder Pagina</button>
                    </div>
                    <div class="col-md-5" id="opslaan">
                      <button (click)="addFolders(form_name.value,textbox?.value,email?.value,number?.value,date?.value,datetime?.value,textarea?.value,checkbox?.value)"
                        [disabled]="paginaForm.pristine || paginaForm?.invalid">Opslaan Pagina</button>
                    </div>
                  </div>
                  </div>
                  </div>
                </div>
              </div>
            </div>

            <div *ngIf="report" class="padding20 white-bg">
              <div class="row">
                <div class="col-12 btn-cont">
                  <button (click)="report=false" class="btn btn-primary">
                    << Back</button> </div> <div class="col-12 spacer30">
                </div>
                <!-- if records found -->
                <div *ngIf="reports?.length > 0" class="col-12">
                  <div *ngFor="let records of reports" class="report-block">
                    <div *ngFor="let record of records.attributes">
                      <div *ngIf="record.type !='button' && record.type !='paragraph'" class="row">
                        <div class="col-4">{{record.label}}</div>
                        <div class="col-8">{{record.value}}</div>
                      </div>
                    </div>
                  </div>
                  <!-- <pre>{{reports|json}}</pre> -->
                </div>
                <!-- if no records found -->
                <div *ngIf="reports?.length == 0" class="col-12 btn-cont">
                  No response found
                </div>
              </div>
            </div>
            <pre *ngIf="show==1 && model">
                  {{model|json}}
                  </pre>
            <div class="toevoegen">
              <button type="button" (click)="addPagina()">
                Pagina toevoegen
              </button>
            </div>
           
          </form>
          </div>
        </div>
      </div>
      <div class="col-md-3" id="panelbar">
        <div class="panelbar-wrapper">
          <kendo-panelbar class="panelbar" [items]="items">
            <ng-template kendoPanelBarItemTemplate *ngFor="let items of items">{{items}}</ng-template>
          </kendo-panelbar>
          <div class="fields" *ngFor="let item of fieldmodels">
            <div class="sidenav" [dndDraggable]="item" [dndEffectAllowed]="'copy'" (dndEnd)="onDragEnd($event)">
              <i [ngClass]="item.icon" class="fa pull-left"></i>
              <h5 class="a">{{item.title}}</h5>
            </div>
          </div>
          <app-bewerken></app-bewerken>
        </div>
      </div>
      <!-- <div class="info">
          <p>© Genetics B.V. Eformulieren Builder 2019</p>
        </div> -->

    </div>
    <!-- Include all compiled plugins (below),or include individual files as needed -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
      crossorigin="anonymous"></script>
  </div>
</body>

</html>