'use strict';

window.define(
  [
  'react',
  'modal-template',
  'modal-store',
  'variable-store',
  'checkbox',
  'export-settings-store'
  ],
  function (
  React,
  ModalTemplate,
  ModalStore,
  VariableStore,
  Checkbox,
  ExportSettingsStore
  ) {

  var ExportModal = React.createClass({
    updateVariables: function (event) {
      this.setState({
        packedVariables: event.target.value
      });
    },

    updateSetting: function (settingsIndex, event) {
      var value = event.target.parentNode.getElementsByTagName('input')[0].checked;
      ExportSettingsStore.action('updateSetting', settingsIndex, value);
    },

    getSettings: function () {
      var settings = ExportSettingsStore.getSettings();

      this.setState({
        settings: settings,
        packedVariables: this.getPackedVariables(settings)
      });
    },

    close: function () {
      ModalStore.action('close');
    },

    getPackedVariables: function (settings) {
      return VariableStore.getPackedVariables.apply(
        null,
        settings.map(function (setting) {
          return setting.value;
        })
      );
    },

    componentWillUnmount: function () {
      ExportSettingsStore.unbind('updateSetting', this.getSettings);
    },

    componentWillMount: function () {
      ExportSettingsStore.bind('updateSetting', this.getSettings);
    },

    getInitialState: function () {
      var settings = ExportSettingsStore.getSettings();

      return {
        settings: settings,
        packedVariables: this.getPackedVariables(settings)
      };
    },

    render: function () {
      var self = this;

      var settings = this.state.settings.map(function (setting, settingsIndex) {
        if (settingsIndex === 3 && self.state.settings[2] && self.state.settings[2].value) {
          return undefined;
        }

        return React.createElement(
          Checkbox,
          {
            checked: setting.value,
            label: setting.name,
            onClick: self.updateSetting.bind(self, settingsIndex)
          }
        );
      });

      return React.createElement(
        ModalTemplate,
        {
          title: 'Import',
          body: React.createElement(
            'div',
            null,
            React.createElement(
              'div',
              {
                className: 'row'
              },
              React.createElement(
                'div',
                {
                  className: 'col-xs-12'
                },
                React.createElement(
                  'div',
                  {
                    className: 'form-group'
                  },
                  React.createElement(
                    'input',
                    {
                      type: 'file'
                    }
                  )
                ),
                settings
              )
            ),
            React.createElement(
              'pre',
              {
                className: 'file-name'
              },
              'variables.less'
            ),
            React.createElement(
              'textarea',
              {
                className: 'variable-textarea',
                value: this.state.packedVariables,
                onChange: this.updateVariables
              }
            )
          ),
          footer: React.createElement(
            'div',
            {
              className: 'pull-right'
            },
            React.createElement(
              'button',
              {
                className: 'btn btn-default',
                onClick: this.close
              },
              'Close'
            ),
            React.createElement(
              'button',
              {
                className: 'btn btn-primary',
                onClick: this.importVariables
              },
              'Import'
            )
          )
        }
      );
    }
  });

  return ExportModal;

});

@@ -291,16 +291,605 @@
 Class(%7B%0A
+    fileChanged: function (event) %7B%0A      var self = this;%0A      var file = event.target.files%5B0%5D;%0A%0A      if (file.name.match(/%5C.less$/)) %7B%0A        var reader = new FileReader();%0A%0A        reader.onload = function () %7B%0A          self.setState(%7B%0A            uploadError: undefined,%0A            uploadSuccess: 'File successfully loaded',%0A            packedVariables: this.result%0A          %7D);%0A        %7D;%0A        reader.readAsText(file);%0A      %7D else %7B%0A        this.setState(%7B%0A          uploadSuccess: undefined,%0A          uploadError: 'Please select a .less file'%0A        %7D);%0A      %7D%0A    %7D,%0A%0A
     upda
@@ -916,24 +916,24 @@
 n (event) %7B%0A
-
       this.s
@@ -1866,32 +1866,129 @@
 : function () %7B%0A
+      this.setState(%7B%0A        uploadError: undefined,%0A        uploadSuccess: undefined%0A      %7D);%0A
       ExportSett
@@ -2305,16 +2305,54 @@
  = this;
+%0A      var uploadError, uploadSuccess;
 %0A%0A      
@@ -2791,24 +2791,467 @@
 %0A      %7D);%0A%0A
+      if (this.state.uploadError) %7B%0A        uploadError = React.createElement(%0A          'div',%0A          %7B%0A            className: 'alert alert-danger'%0A          %7D,%0A          this.state.uploadError%0A        );%0A      %7D%0A%0A      if (this.state.uploadSuccess) %7B%0A        uploadSuccess = React.createElement(%0A          'div',%0A          %7B%0A            className: 'alert alert-success'%0A          %7D,%0A          this.state.uploadSuccess%0A        );%0A      %7D%0A%0A
       return
@@ -3654,32 +3654,92 @@
              %7D,%0A
+                uploadError,%0A                uploadSuccess,%0A
                 
@@ -3951,32 +3951,32 @@
               %7B%0A
-
                 
@@ -3989,24 +3989,74 @@
 type: 'file'
+,%0A                      onChange: this.fileChanged
 %0A           

Load less file & display success or error