import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Icon from './Icon';
import Modal from './Modal';
import Button from './Button';
import Input from './Input';
import { useFormState } from 'react-use-form-state';

import { me, facebookLink, vkLink } from '../api';

function LoginButton({ onAuth, title }) {
  
  const [open, setOpen] = useState(false);
  const [formState, { text, password }] = useFormState();

  let onToggle = (event) => {
    if (event) {
      event.preventDefault();
    }
    setOpen(!open);
  }
  let onSubmit = (event) => {
    event.preventDefault();
    me(formState.values.username, formState.values.password)
      .then(response => {
        onToggle();
        onAuth(response);
      }
      ).catch(ex => {
        console.log(ex);
      });
  }  
  return (
    <>
      <a onClick={onToggle}>
        <Icon name="ei-user" size="s" />
        <span className="desktop">{title}</span>
      </a>
      <Modal show={open}
        onClose={onToggle}>
        <div className="dialoglogin">
          <p>Please, introduce yourself:</p>
          <div style={socialButtonsStyle}>
            <a href={facebookLink()} style={facebookButtonStyle}>
              <Icon name="ei-sc-facebook" size="s" noFill={true} />Log in
              </a>
            <a href={vkLink()} style={vkButtonStyle}>
              <Icon name="ei-sc-vk" size="s" noFill={true} />
              Log in
             </a>
          </div>
          <p>Already registered?</p>
          <form onSubmit={onSubmit}>
            <Input name="username"
              placeholder="Username..."
              value={formState.values.username} {...text('username')} /><br />
            <Input name="password"
              placeholder="Password..."
              value={formState.values.password} {...password('password')} /><br />
            <Button onClick={onSubmit}>OK</Button>
          </form>
        </div>
      </Modal>
    </>
  );
}

LoginButton.propTypes = {
  title: PropTypes.string.isRequired,
  onAuth: PropTypes.func.isRequired
};

const socialButtonsStyle = {
  display: 'flex',
  justifyContent: 'space-evenly',
  padding: '4px'
};

const facebookButtonStyle = {
  color: '#fff',
  padding: '2px 14px',
  background: '#3b5998'
};

const vkButtonStyle = {
  color: '#fff',
  padding: '2px 14px',
  background: '#4c75a3'
};

export default LoginButton;