import {Component, OnInit} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';

import {SAMPLE_FORM_JSON} from '../forms/poc-data/example-form';
import {Helper} from '../forms';
import {environment} from '../../environments/environment';

import * as pocData from '../forms/poc-data/states_titlecase';
@Component({
  selector: 'rss-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  environment = environment;
  profile:any;

  control:FormControl = new FormControl();
  inputTextControl:FormControl = new FormControl();
  inputDatetimeControl:FormControl = new FormControl();
  DateControl:FormControl = new FormControl();
  inputNumberControl:FormControl = new FormControl();
  unitsControl:FormControl = new FormControl();

  dropdownOptions = [{label: 'Option 1', value: '1'}, {label: 'Option2', value: '2'}, {label: 'Other', value: 'Other'}];

  numberConfig = {type: 'number'};
  textConfig = {type: 'text'};
  datetimeConfig = {type: 'date'};
  unitsConfig = {options: this.dropdownOptions, type: 'number'};

  formGroup:FormGroup;

  newFormGroup:FormGroup;

  responses:any = {
    chemical: {
      c13: true,
      c14: false,
      c15: true,
      c16: 15000,
      c17: 'sample input readonly response',
      c18: {
        'inputText': 22, 'units': {
          'label': 'degree C', 'value': 'degree C'
        }
      },
      chemicalIterable: {
        items: [
          {
            "chemicalName": {
              "value": "5944139ba4ebec531deb73da",
              "label": "ACETONITRILE (75-05-8)"
            },
            "exposureLimit": {
              "units": {
                "value": "5944139ba4ebec531deb7387",
                "label": "degrees C"
              },
              "inputText": "11"
            },
            "exposureLimitCategory": {
              "value": "5944139ba4ebec531deb7344",
              "label": "Below 1/100 PEL"
            },
            "exposureLimitCategoryOther": null
          },
          {
            "chemicalName": {
              "value": "5944139ba4ebec531deb73da",
              "label": "ACID (75-05-8)"
            },
            "exposureLimit": {
              "units": {
                "value": "5944139ba4ebec531deb7387",
                "label": "degrees C"
              },
              "inputText": "11"
            },
            "exposureLimitCategory": {
              "value": "5944139ba4ebec531deb7344",
              "label": "Below 1/100 PEL"
            },
            "exposureLimitCategoryOther": null
          }
        ]
      },
      activities: [{
        'name': 'Electric Drill', 'completed': false
      }],
      monitoredDate: "7/12/2017",
      monitoringStrategy: {
        "value": "5915fe47198cce2d9958994b",
        "label": "Power Saw - Skull"
      },
      monitoredEmployee: {
        "userId": "VUN8MDN8cGJvbGVuQHVjZGF2aXMuZWR1",
        "campusCode": "03",
        "firstName": "Patsy",
        "lastName": "Bolen",
        "email": "pabolen@ucdavis.edu"
      },
      monitoredLocation: {
        'building': {
          'buildingId': 'MDN8RFYtMDEtMDAxNzkwCg',
          'campusCode': '03',
          'primaryName': 'DANR Sierra Foothill R&EC Pavilion',
          'otherName': 'Sierra Foothill R&EC Pavilion, Browns Valley',
          'address': '8279 Scott Forbes Rd'
        },
        'rooms': [
          {
            'roomId': 'MDN8VC1CLTF8MXwxMwo2',
            'roomNumber': '2561',
            'roomName': 'Conference Room 2'
          },
          {
            'roomId': 'MDN8VC1CLTF8MXwxNAo2',
            'roomNumber': '2562',
            'roomName': 'Room 2562'
          }
        ]
      },
      multiDropdown: [
        {
          'value': '1',
          'label': 'Option 1'
        },
        {
          'value': 'Other',
          'label': 'Other'
        }
      ],
      c19: {
        'value': 'Other',
        'label': 'Other'
      },
      c20: 'Selected Other Option'
    }
  };

  readonlyFormGroup:FormGroup;
  sampleForm:any = SAMPLE_FORM_JSON;

  comboBoxCtrl:FormControl;
  comboBoxDataSource:any;
  comboOptions:any;

  constructor() {

    this.comboBoxCtrl = new FormControl();
    this.comboBoxDataSource = pocData.comboBoxData;
    this.comboOptions = {
      'placeholder': 'Type to search or select',
      'label': 'Type to search and select or add your own text',
      //  'displayKey': 'abbreviation'
    };
  }

  ngOnInit() {
    this.newFormGroup = Helper.buildFormGroup(SAMPLE_FORM_JSON);
    this.formGroup = Helper.buildFormGroup(SAMPLE_FORM_JSON, this.responses);
    this.readonlyFormGroup = Helper.buildFormGroup(SAMPLE_FORM_JSON, this.responses);
  }

  toggleMenu() {
    console.log('menu event emitted for client apps to handle sidemenu');
  }
}