/* eslint-disable react/no-set-state */
import React, {Component} from 'react';
import classNames from 'classnames';
import {Cookies, withCookies} from 'react-cookie';
import {instanceOf} from 'prop-types';
import autobind from 'autobind-decorator';

import TextField from 'material-ui/TextField';
import {Tabs, Tab} from 'material-ui/Tabs';
import RaisedButton from 'material-ui/RaisedButton';
import AppBar from 'material-ui/AppBar';

import Highlight from 'react-highlight';
import 'highlight.js/styles/default.css';

import SparkLogo from '@ciscospark/react-component-spark-logo';
import WidgetMessageMeet from '@ciscospark/widget-message-meet';

import TokenInput from '../token-input';

import styles from './styles.css';


class DemoWidgetMessageMeet extends Component {
  componentWillMount() {
    const {cookies} = this.props;
    const hasToken = !!cookies.get(`accessToken`);
    this.state = {
      authenticate: false,
      hasToken,
      accessToken: cookies.get(`accessToken`) || ``,
      toPersonEmail: cookies.get(`toPersonEmail`) || ``,
      running: false
    };
  }


  shouldComponentUpdate() {
    return true;
  }

  @autobind
  handleSubmit(e) {
    e.preventDefault();
    const {cookies} = this.props;
    cookies.set(`accessToken`, this.state.accessToken);
    cookies.set(`toPersonEmail`, this.state.toPersonEmail);
    this.setState({running: true});
  }

  @autobind
  handleAccessTokenChange(accessToken) {
    return this.setState({accessToken, hasToken: !!accessToken});
  }

  @autobind
  handleEmailChange(e) {
    return this.setState({toPersonEmail: e.target.value});
  }

  @autobind
  handleModeChange(e) {
    return this.setState({mode: e.target.value});
  }

  @autobind
  handleClearToken() {
    return this.setState({hasToken: false}, () => cookie.remove(`accessToken`));
  }

  createWidget(e) {
    e.preventDefault();
    return this.setState({running: true});
  }

  generateExampleCode(state) {
    const {accessToken, toPersonEmail} = state;
    let inlineToField, reactToField;
    if (toPersonEmail) {
      inlineToField = `data-to-person-email="${toPersonEmail}"`;
      reactToField = `toPersonEmail="${toPersonEmail}"`;
    }
    else {
      inlineToField = `data-to-person-email="TO_PERSON_EMAIL"`;
      reactToField = `toPersonEmail="TO_PERSON_EMAIL"`;
    }
    const reactCode = `import MessageMeetWidget from '@ciscospark/widget-message-meet';

<MessageMeetWidget accessToken="${accessToken}" ${reactToField} />`;
    const inlineCode = `<div data-toggle="ciscospark-message-meet" data-access-token="${accessToken}" ${inlineToField} />`;
    return {
      inlineCode,
      reactCode
    };
  }

  render() {
    const loadButtonEnabled = this.state.accessToken && this.state.toPersonEmail;
    const {inlineCode, reactCode} = this.generateExampleCode(this.state);
    if (this.state.running) {
      return (
        <div>
          <AppBar title="Cisco Spark Message Meet Widget" />
          <div className={classNames(`ciscospark-widget-component-container`, styles.widgetComponentContainer)}>
            <WidgetMessageMeet
              accessToken={this.state.accessToken}
              toPersonEmail={this.state.toPersonEmail}
            />
          </div>
        </div>
      );
    }
    return (
      <div>
        <AppBar title="Cisco Spark Message Meet Widget" />
        <div className={classNames(`ciscospark-demo-wrapper`, styles.demoWrapper)}>
          <div className={classNames(`ciscospark-logo`, styles.logo)}>
            <SparkLogo />
          </div>
          { !this.state.hasToken &&
            <TokenInput onLogin={this.handleAccessTokenChange} />
          }
          {
            this.state.hasToken &&
              <div className={classNames(styles.toForm)}>
                <div className={classNames(styles.header)}>
                  <div>
                    <TextField
                      floatingLabelFixed
                      floatingLabelText="To User Email"
                      hintText="Spark User Email (For 1:1)"
                      onChange={this.handleEmailChange}
                      value={this.state.toPersonEmail}
                    />
                  </div>
                  <div>
                    <RaisedButton
                      disabled={!loadButtonEnabled}
                      label={`Open Widget`}
                      onClick={this.handleSubmit}
                      primary
                    />
                    <RaisedButton
                      disabled={!this.state.accessToken}
                      label={`Clear Token`}
                      onClick={this.handleClearToken}
                      secondary
                    />
                  </div>
                </div>
                <div className={classNames(styles.example)}>
                  <Tabs>
                    <Tab label={`React Component`}>
                      <div className={classNames(`ciscospark-example-code`, styles.exampleCode)}>
                        <Highlight>
                          {reactCode}
                        </Highlight>
                      </div>
                    </Tab>
                    <Tab label={`Inline Mode`}>
                      <div className={classNames(`ciscospark-example-code`, styles.exampleCode)}>
                        <Highlight>
                          {inlineCode}
                        </Highlight>
                      </div>
                    </Tab>
                  </Tabs>
                </div>
              </div>
          }
        </div>
      </div>
    );
  }
}

DemoWidgetMessageMeet.propTypes = {
  cookies: instanceOf(Cookies).isRequired
};

DemoWidgetMessageMeet.title = `Widget Message Meet`;
DemoWidgetMessageMeet.path = `/widget-message-meet-demo`;

export default withCookies(DemoWidgetMessageMeet);

@@ -1731,24 +1731,58 @@
 arToken() %7B%0A
+    const %7Bcookies%7D = this.props;%0A
     return t
@@ -1825,16 +1825,17 @@
 %3E cookie
+s
 .remove(

clear token cookie properly