text: /* eslint-disable jsx-a11y/label-has-associated-control */
  import React from 'react';
  import { useDispatch, useSelector } from 'react-redux';
  import { Form, Input } from '@rocketseat/unform';
  import * as Yup from 'yup';
  
  import { signInRequest } from '~/store/modules/auth/actions';
  
  import logoLeft from '~/assets/logo/logo-l@2x.png';
  import logoRight from '~/assets/logo/logo-r@2x.png';
  
  const schema = Yup.object().shape({
    email: Yup.string()
      .email('Insira um e-mail válido')
      .required('O e-mail é obrigatório'),
    password: Yup.string().required('A senha é obrigatória'),
  });
  
  export default function SignIn() {
    const dispatch = useDispatch();
  
    const loading = useSelector(state => state.auth.loading);
  
    function handleSubmit({ email, password }) {
      dispatch(signInRequest(email, password));
    }
  
    return (
      <>
        <div className="logo">
          <img src={logoLeft} alt="" />
          <img src={logoRight} alt="" />
        </div>
        <span className="logo">GYMPOINT</span>
        <Form schema={schema} onSubmit={handleSubmit}>
          <label htmlFor="email">Seu e-mail</label>
          <Input type="email" name="email" placeholder="Email" />
  
          <label htmlFor="password">Sua senha</label>
          <Input type="password" name="password" placeholder="Senha" />
  
          <button type="submit">
            {loading ? 'Carregando...' : 'Entrar no sistema'}
          </button>
        </Form>
      </>
    );
  }
  