import React, { PropTypes, Component } from 'react';
import Router from '../router.js'
import { Dropdown } from 'react-bootstrap';
import { Button, Input } from 'react-bootstrap';

import { Accounts } from 'meteor/std:accounts-ui';

const AccountsMenu = () => {

  ({UserAvatar, UserName} = Telescope.components);

  return (
    <Dropdown id="accounts-dropdown" className="user-menu-dropdown">
      <Dropdown.Toggle>
        Log In
      </Dropdown.Toggle>
      <Dropdown.Menu>
        <Accounts.ui.LoginForm />
      </Dropdown.Menu>
    </Dropdown>
  )
}

module.exports = AccountsMenu;
export default AccountsMenu;

// customize Accounts.ui

Accounts.ui.config({
  passwordSignupFields: 'USERNAME_AND_EMAIL',
});

class AccountsButton extends Accounts.ui.Button {
  render() {
    const { label, href, type, disabled = false, className, onClick } = this.props;
    if (type == 'link') {
      return <Button bsStyle="default"
                     href="#"
                     className={ className }
                     onClick={ onClick }>{ label }</Button>;
    }
    return <Button bsStyle="primary"
                   type={ type }
                   className={ className }
                   onClick={ onClick }
                   disabled={ disabled }>{ label }</Button>;
  }
}

class AccountsField extends Accounts.ui.Field {
  render() {
    const { id, hint, label, type = 'text', onChange, className = "field", defaultValue = "" } = this.props;
    const { mount = true } = this.state;
    return mount ? (
      <div className={ className }>
        <Input id={ id } type={ type } onChange={ onChange } placeholder={ hint } defaultValue={ defaultValue } />
      </div>
    ) : null;
  }
}

Accounts.ui.Button = AccountsButton;
Accounts.ui.Field = AccountsField;