import React from 'react';
import { observer } from 'mobx-react';

import { Flex } from 'reflexbox';
import { Input, ButtonOutline, InlineForm } from 'rebass';
import Layout, { Title } from 'components/Layout';
import CenteredContent from 'components/CenteredContent';
import SlackAuthLink from 'components/SlackAuthLink';
import ApiKeyRow from './components/ApiKeyRow';

import styles from './Settings.scss';

import SettingsStore from './SettingsStore';

@observer
class Settings extends React.Component {
  static store;

  constructor(props) {
    super(props);
    this.store = new SettingsStore();
  }

  onKeyCreate = (e) => {
    e.preventDefault();
    this.store.createApiKey();
  }

  render() {
    const title = (
      <Title>
        Settings
      </Title>
    );

    return (
      <Layout
        title={ title }
        titleText="Settings"
        search={ false }
        loading={ this.store.isFetching }
      >
        <CenteredContent>
          <div className={ styles.section }>
            <h2 className={ styles.sectionHeader }>Slack</h2>
            <p>
              Connect Atlas to your Slack to instantly search for your documents
              using <code>/atlas</code> command.
            </p>

            <SlackAuthLink
              scopes={ ['commands'] }
              redirectUri={ `${URL}/auth/slack/commands` }
            >
              <img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack.png" srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x" />
            </SlackAuthLink>
          </div>

          <div className={ styles.section }>
            <h2 className={ styles.sectionHeader }>API access</h2>
            <p>
              Create API tokens to hack on your Atlas.
              Learn more in <a href>API documentation</a>.
            </p>

            { this.store.apiKeys && (
              <table className={ styles.apiKeyTable }>
                { this.store.apiKeys.map(key => (
                  <ApiKeyRow
                    id={ key.id }
                    name={ key.name }
                    secret={ key.secret }
                    onDelete={ this.store.deleteApiKey }
                  />
                )) }
              </table>
            ) }

            <div>
              <InlineForm
                placeholder="Token name"
                buttonLabel="Create token"
                label="InlineForm"
                name="inline_form"
                value={ this.store.keyName }
                onChange={ this.store.setKeyName }
                onClick={ this.onKeyCreate }
                style={{ width: '100%' }}
                disabled={ this.store.isFetching }
              />
            </div>

          </div>
        </CenteredContent>
      </Layout>
    );
  }
}

export default Settings;