import * as React from 'react'
import { ActionCreator } from 'typescript-fsa'

import { LoginCreds, LoginStatus } from '../../modules/auth/interfaces'
import { NEW_ACCOUNT, PASSWORD_RESET } from '../../utils/ResourceConstants'

import InlineSVG from 'svg-inline-react'

import './styles.styl'

const logo = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../img/svg/drift-logo-circle-white.svg')

import DotsLoader from '../DotsLoader'

interface LoginProps {
  loginStatus: LoginStatus
  loginFailed: boolean
  actions: {
    submitLogin: ActionCreator<LoginCreds>,
  }
}

class Login extends React.Component<LoginProps, LoginCreds> {
  constructor(props: LoginProps) {
    super(props)
    this.state = {
      username: '',
      password: '',
    }
  }

  handleUsernameChange = (event: any) => {
    this.setState({ username: event.target.value })
  }

  handlePasswordChange = (event: any) => {
    this.setState({ password: event.target.value })
  }

  handleForgotUsername = (event: any) => {
    chrome.tabs.create({ url: PASSWORD_RESET })
  }

  handleSignup = (event: any) => {
    chrome.tabs.create({ url: `${NEW_ACCOUNT}/?utm_source=chrome-extension-signup&utm_medium=chrome-extension&utm_campaign=chrome-webstore` })
  }

  handleSubmit = (event: any) => {
    event.preventDefault()
    const { username, password } = this.state
    this.props.actions.submitLogin({ username, password })
  }

  render() {
    const { username, password } = this.state
    const { loginStatus } = this.props
    return (
      <div className="drift-login-popup">
        <InlineSVG className="drift-popup-logo" src={logo} />
        <h3 className="drift-popup-header">Login to Drift</h3>
        <p className="login-account-info-text sign-up">
            New to Drift? <a className="drift-outbound-login-page-link sign-up"
              onClick={this.handleSignup}>Create a Drift account.</a></p>
        <form onSubmit={ this.handleSubmit }>
          <input
            className="drift-outbound-input drift-outbound-username"
            type="email"
            placeholder="Email Address"
            value={username}
            onChange={this.handleUsernameChange} />
          <input
            className="drift-outbound-input drift-outbound-password"
            type="password"
            placeholder="Password"
            value={password}
            onChange={this.handlePasswordChange} />
          {loginStatus === LoginStatus.FAILED && <p className="drift-outbound-failed-login">Sorry, your email or password didn't match - try again!</p>}
          <button type="submit" className="drift-outbound-button button-primary">
            {
              loginStatus === LoginStatus.PENDING
                ? <DotsLoader />
                : 'Log In'
            }
          </button>
        </form>
        <a className="login-account-info-text drift-outbound-login-page-link forgot-password"
          onClick={this.handleForgotUsername}>I forgot my password</a>
      </div>
    )
  }
}

export default Login