import React from "react";
import Reflux from "reflux";
import reactMixin from "react-mixin";
import autoBind from "react-autobind";
import bem from "../../bem";
import classNames from "classnames";
import Select from "react-select";
import alertify from "alertifyjs";
import stores from "../../stores";
import actions from "../../actions";
import mixins from "../../mixins";
import {dataInterface} from '../../dataInterface';
import {
  t,
  formatTime,
  notify
} from "../../utils";

class TemplatesList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      templates: [],
      templatesCount: 0,
      selectedTemplateUid: null
    };
    autoBind(this);
  }

  componentDidMount() {
    this.fetchTemplates();
  }

  fetchTemplates() {
    this.setState({isLoading: true});
    dataInterface.listTemplates().then((data) => {
      this.setState({
        templates: data.results,
        templatesCount: data.count,
        isLoading: false
      });
    });
  }

  onSelectedTemplateChange(evt) {
    this.setState({selectedTemplateUid: evt.target.value});
    this.props.onSelectTemplate(evt.target.value);
  }

  render() {
    if (this.state.isLoading) {
      return (
        <bem.Loading>
          <bem.Loading__inner>
            <i />
            {t('loading...')}
          </bem.Loading__inner>
        </bem.Loading>
      )
    } else if (this.state.templatesCount === 0) {
      return (
        <bem.FormView__cell>
          {t('You have no templates. Go to Library and create some.')}
        </bem.FormView__cell>
      )
    } else {
      return (
        <bem.TemplatesList>
          <bem.TemplatesList__header className={['templates-list__row']}>
            <bem.TemplatesList__column m='name'>
              {t('Template name')}
            </bem.TemplatesList__column>
            <bem.TemplatesList__column m='date'>
              {t('Last modified')}
            </bem.TemplatesList__column>
            <bem.TemplatesList__column m='questions'>
              {t('Questions')}
            </bem.TemplatesList__column>
          </bem.TemplatesList__header>

          {this.state.templates.map((template) => {
            const htmlId = `selected_template_${template.uid}`;
            return (
              <bem.TemplatesList__template
                key={template.uid}
                htmlFor={htmlId}
                className={['templates-list__row']}
              >
                <bem.TemplatesList__column m='name'>
                  {template.name}
                </bem.TemplatesList__column>
                <bem.TemplatesList__column m='date'>
                  {formatTime(template.date_modified)}
                </bem.TemplatesList__column>
                <bem.TemplatesList__column m='questions'>
                  {template.summary.row_count}
                </bem.TemplatesList__column>

                <bem.TemplatesList__templateRadio
                  type='radio'
                  name='selected_template'
                  id={htmlId}
                  value={template.uid}
                  checked={this.state.selectedTemplateUid === template.uid}
                  onChange={this.onSelectedTemplateChange}
                ></bem.TemplatesList__templateRadio>
              </bem.TemplatesList__template>
            )
          })}
        </bem.TemplatesList>
      );
    }
  }
}

reactMixin(TemplatesList.prototype, Reflux.ListenerMixin);

export default TemplatesList;

@@ -1,16 +1,216 @@
+/*%0A * Displays a list of templates with option to select one.%0A * Add %60onSelectTemplate%60 callback funciton to ge selected uid:%0A * %60%3CTemplatesList onSelectTemplate=%7Bthis.handleTemplateSelected%7D/%3E%60%0A */%0A%0A
 import React fro
@@ -215,15 +215,15 @@
 rom 
-%22
+'
 react
-%22
+'
 ;%0Aim
@@ -243,16 +243,16 @@
 rom 
-%22
+'
 reflux
-%22
+'
 ;%0Aim
@@ -268,25 +268,25 @@
 tMixin from 
-%22
+'
 react-mixin%22
@@ -284,17 +284,17 @@
 ct-mixin
-%22
+'
 ;%0Aimport
@@ -304,25 +304,25 @@
 toBind from 
-%22
+'
 react-autobi
@@ -323,17 +323,17 @@
 autobind
-%22
+'
 ;%0Aimport
@@ -338,25 +338,25 @@
 rt bem from 
-%22
+'
 ../../bem%22;%0A
@@ -352,17 +352,17 @@
 ./../bem
-%22
+'
 ;%0Aimport
@@ -378,17 +378,17 @@
 es from 
-%22
+'
 classnam
@@ -389,17 +389,17 @@
 assnames
-%22
+'
 ;%0Aimport
@@ -411,17 +411,17 @@
 ct from 
-%22
+'
 react-se
@@ -424,17 +424,17 @@
 t-select
-%22
+'
 ;%0Aimport
@@ -448,17 +448,17 @@
 fy from 
-%22
+'
 alertify
@@ -459,17 +459,17 @@
 ertifyjs
-%22
+'
 ;%0Aimport
@@ -477,25 +477,25 @@
 stores from 
-%22
+'
 ../../stores
@@ -494,17 +494,17 @@
 ./stores
-%22
+'
 ;%0Aimport
@@ -513,25 +513,25 @@
 ctions from 
-%22
+'
 ../../action
@@ -531,17 +531,17 @@
 /actions
-%22
+'
 ;%0Aimport
@@ -549,25 +549,25 @@
 mixins from 
-%22
+'
 ../../mixins
@@ -566,17 +566,17 @@
 ./mixins
-%22
+'
 ;%0Aimport
@@ -664,17 +664,17 @@
 %0A%7D from 
-%22
+'
 ../../ut
@@ -680,9 +680,9 @@
 tils
-%22
+'
 ;%0A%0Ac

add top file comment with instructions