import React, { Component } from 'react';
import SideBar from 'react-sidebar';
import map from 'lodash/map';
import './ValidationBar.scss';

import { validateTOS, validateRecord } from '../../../utils/validators';

const styles = {
  sidebar: {
    width: 300,
    height: '100%',
    padding: '10px 0 0 20px',
    backgroundColor: 'white',
    zIndex: '99'
  },
  sidebarLink: {
    display: 'block',
    color: '#757575',
    textDecoration: 'none'
  },
  divider: {
    margin: '8px 0',
    height: 1,
    backgroundColor: '#757575'
  },
  content: {
    height: '100%'
  }
};

export class ValidationBar extends Component {
  constructor (props) {
    super(props);
    this.renderContent = this.renderContent.bind(this);
  }

  generateInvalidAttributes (validate, values) {
    const invalidAttributes = validate(values, this.props.attributeTypes);
    const mappedInvalidAttributes = map(invalidAttributes, (item, index) => (
      <div key={index} className='missing-attribute'>
        {'• '}{this.props.attributeTypes[item].name}
      </div>
    ));

    if (invalidAttributes.length) {
      return (
        <div className='missing-attributes'>
          {mappedInvalidAttributes}
        </div>
      );
    }
  }

  generateAttributeSection (validate, element, index) {
    const invalidAttributes = validate(element, this.props.attributeTypes);

    if (invalidAttributes.length) {
      return (
        <div key={index}>
          <div className='parent-name'>{element.name}</div>
          <div className='missing-attributes'>
            {map(invalidAttributes, (item, index) => (
              <div key={index} className='missing-attribute'>
                {'• '}{this.props.attributeTypes[item].name}
              </div>
            ))}
          </div>
        </div>
      );
    }
  }

  renderContent () {
    const { selectedTOS } = this.props;

    const invalidTOSAttributes = this.generateInvalidAttributes(validateTOS, selectedTOS);
    const invalidPhaseAttributes = undefined;
    const invalidActionAttributes = undefined;
    const invalidRecordAttributes = map(selectedTOS.records, (record, index) => (
        this.generateAttributeSection(validateRecord, record, index)
      )
    );

    if (invalidTOSAttributes ||
        invalidPhaseAttributes ||
        invalidActionAttributes ||
        invalidRecordAttributes) {
      return (
        <div className='sidebar-content'>
          <h4>Puuttuvat metatiedot</h4>
          {invalidTOSAttributes &&
            <h5>TOS-metatiedot</h5>}
          {invalidTOSAttributes}
          {invalidPhaseAttributes &&
            <h5>Käsittelyvaiheet</h5>}
          {invalidPhaseAttributes}
          {invalidActionAttributes &&
            <h5>Toimenpiteet</h5>}
          {invalidActionAttributes}
          {invalidRecordAttributes &&
            <h5>Asiakirjat</h5>}
          {invalidRecordAttributes}
        </div>
      );
    }
    return (
      <div className='sidebar-content'>
        <div className='no-missing-attributes fa fa-check-circle'/>
      </div>
    );
  }

  render () {
    const { children, selectedTOS } = this.props;
    const sidebarContent = selectedTOS.id ? this.renderContent() : <div/>;

    return (
      <div>
        <SideBar
          sidebar={sidebarContent}
          open={this.props.is_open}
          onSetOpen={() => this.props.setValidationVisibility(false)}
          pullRight={true}
          styles={styles}>
          {children}
        </SideBar>
      </div>
    );
  }
};

ValidationBar.propTypes = {
  attributeTypes: React.PropTypes.object.isRequired,
  children: React.PropTypes.array.isRequired,
  is_open: React.PropTypes.bool.isRequired,
  selectedTOS: React.PropTypes.object.isRequired,
  setValidationVisibility: React.PropTypes.func.isRequired
};

export default ValidationBar;

@@ -1990,33 +1990,26 @@
 ttributes = 
-undefined
+%5B%5D
 ;%0A    const 
@@ -2038,17 +2038,10 @@
 s = 
-undefined
+%5B%5D
 ;%0A  
@@ -2568,36 +2568,47 @@
 dPhaseAttributes
+.length %3E 0
  &&%0A
-
             %3Ch5%3E
@@ -2691,32 +2691,43 @@
 ActionAttributes
+.length %3E 0
  &&%0A            
@@ -2777,32 +2777,32 @@
 tionAttributes%7D%0A
-
           %7Binval
@@ -2811,32 +2811,43 @@
 RecordAttributes
+.length %3E 0
  &&%0A            

Fix extra headers still showing