import React from 'react';
import './Record.scss';
import Attribute from './Attribute';
import DeleteView from './DeleteView';
import Dropdown from 'components/Dropdown';
import Popup from 'components/Popup';

export class Record extends React.Component {
  constructor (props) {
    super(props);
    this.toggleAttributeVisibility = this.toggleAttributeVisibility.bind(this);
    this.state = {
      showAttributes: false,
      mode: 'view',
      deleting: false,
      deleted: false
    };
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.record.name) {
      this.setState({
        name: nextProps.record.name,
        attributes: nextProps.record.attributes
      });
    }
  }

  setMode (value) {
    this.setState({ mode: value });
  }

  // editRecord () {
  //   this.setMode('edit');
  //   this.setState({ showAttributes: true });
  // }

  saveRecord () {
    this.setMode('view');
    // const savedRecord = {
    //   id: this.props.record.id,
    //   name: this.props.record.name,
    //   attributes: this.props.record.attributes
    // };
    // this.props.editRecord(savedRecord);
  }

  cancelRecordEdit () {
    this.setMode('view');
  }

  toggleAttributeVisibility () {
    const currentVisibility = this.state.showAttributes;
    const newVisibility = !currentVisibility;
    this.setState({ showAttributes: newVisibility });
  }

  generateRecordObjects (record) {
    const recordObjects = [];
    recordObjects.push({ recordKey: 'Asiakirjatyypin tarkenne', name: record.name, type: '' });
    recordObjects.push({ recordKey: 'Tyyppi', name: record.attributes.RecordType, type: record.attributes.RecordType });
    return recordObjects;
  }

  generateRecordAttributes (records) {
    return records.map((record, index) => {
      return (
        <Attribute
          key={index}
          recordId={this.props.record.id}
          attributeIndex={record.type}
          attributeKey=''
          attribute={record.name}
          documentState={this.props.documentState}
          attributeTypes={this.props.recordTypes}
          mode={this.state.mode}
          type='record'
          editable={true}
          editRecord={this.props.editRecord}
          showAttributes={true}
        />
      );
    });
  }

  generateAttributes (attributes, recordName, recordType) {
    const attributeElements = [];
    for (const key in attributes) {
      if (attributes.hasOwnProperty(key) && this.props.attributeTypes[key]) {
        attributeElements.push(
          <Attribute
            key={key}
            recordId={this.props.record.id}
            attributeIndex={key}
            attributeKey={this.props.attributeTypes[key].name}
            attribute={attributes[key]}
            documentState={this.props.documentState}
            attributeTypes={this.props.attributeTypes}
            mode={this.state.mode}
            type='attribute'
            editable={true}
            editRecord={this.props.editRecord}
            showAttributes={this.state.showAttributes}
          />);
      }
    }
    return attributeElements;
  }

  cancelDeletion () {
    this.setState({ deleting: false });
  }

  delete () {
    this.setState({ deleted: true, deleting: false });
  }

  render () {
    const { record } = this.props;
    const recordObjects = this.generateRecordObjects(record);
    const recordAttributes = this.generateRecordAttributes(recordObjects);
    const attributes = this.generateAttributes(record.attributes);
    return (
      <div className={'record col-xs-12 ' + (this.state.showAttributes ? 'record-open' : '')}>
        { !this.state.deleted &&
        <div className='list-group'>
          { this.state.mode === 'view' &&
          <div className='record-button-group'>
            { this.props.documentState === 'edit' &&
            <Dropdown
              children={[{
                text: 'Poista asiakirja',
                icon: 'fa-trash',
                style: 'btn-delete',
                action: () => this.setState({ deleting: true })
              }]}
              extraSmall={true}
            />
            }
            <button
              className='btn btn-info btn-xs record-button pull-right'
              onClick={this.toggleAttributeVisibility}>
              <span
                className={'fa ' + (this.state.showAttributes ? 'fa-minus' : 'fa-plus')}
                aria-hidden='true'
              />
            </button>
          </div>
          }
          { recordAttributes }
          { attributes }
          { this.state.mode === 'edit' &&
          <div className='col-xs-12'>
            <button className='btn btn-primary pull-right edit-record__submit'
                    onClick={() => this.saveRecord()}>
              Valmis
            </button>
            <button className='btn btn-default pull-right edit-record__cancel'
                    onClick={() => this.cancelRecordEdit()}>
              Peruuta
            </button>
          </div>
        }
        </div>
        }
        { this.state.deleting &&
        <Popup
          content={
            <DeleteView
              type='record'
              target={this.props.record.name}
              action={() => this.delete()}
              cancel={() => this.cancelDeletion()}
            />
          }
          closePopup={() => this.cancelDeletion()}
        />
        }
      </div>
    );
  }
}

Record.propTypes = {
  attributeTypes: React.PropTypes.object.isRequired,
  documentState: React.PropTypes.string.isRequired,
  editRecord: React.PropTypes.func.isRequired,
  record: React.PropTypes.object.isRequired,
  recordTypes: React.PropTypes.object.isRequired
};

export default Record;

@@ -866,16 +866,19 @@
  // %7D%0A%0A 
+ //
  saveRec
@@ -883,24 +883,27 @@
 ecord () %7B%0A 
+ //
    this.setM
@@ -919,220 +919,20 @@
 ');%0A
-  
   // 
-const savedRecord = %7B%0A    //   id: this.props.record.id,%0A    //   name: this.props.record.name,%0A    //   attributes: this.props.record.attributes%0A    // %7D;%0A    // this.props.editRecord(savedRecord);%0A  
 %7D%0A%0A 
+ //
  can
@@ -947,24 +947,27 @@
 dEdit () %7B%0A 
+ //
    this.setM
@@ -976,24 +976,27 @@
 e('view');%0A 
+ //
  %7D%0A%0A  toggle
@@ -4334,32 +4334,36 @@
 utes %7D%0A         
+ %7B/*
  %7B this.state.mo
@@ -4795,32 +4795,38 @@
  %3C/div%3E%0A        
+  %7D */
 %7D%0A        %3C/div%3E

Comment out unused code