import { Link } from 'react-router-dom';
import useForm from '../../hooks/useForm';

import {
  CredentialsWrapper,
  DividerButtons,
  DividerText,
  Input,
  LockIcon,
  PersonIcon,
  SignInButton,
  ButtonsWrapper,
  RegisterText,
} from './styles';

const Login = () => {
  const { data, onFormChange } = useForm({
    email: '',
    password: '',
  });
  const handleSignIn = () => {
    console.log(`Email: ${data.email}`);
    console.log(`Password: ${data.password}`);
  };
  return (
    <>
      <CredentialsWrapper>
        <Input
          name='email'
          value={data.email}
          onChange={onFormChange}
          InputProps={{
            startAdornment: <PersonIcon />,
          }}
        />
        <Input
          name='password'
          value={data.password}
          onChange={onFormChange}
          InputProps={{
            startAdornment: <LockIcon />,
          }}
          type='password'
        />
      </CredentialsWrapper>
      <ButtonsWrapper>
        <SignInButton onClick={handleSignIn}>НАЈАВА</SignInButton>
        <DividerButtons>
          <DividerText>ИЛИ</DividerText>
        </DividerButtons>
        <SignInButton>НАЈАВА КАКО ГОСТИН</SignInButton>{' '}
        {/* TODO Neka nosi do '/login-guest'*/}
      </ButtonsWrapper>
      <RegisterText>
        {' '}
        {/* TODO Neka nosi do '/register' */}
        Немате Сметка?
        <Link to='#'>Регистрирај се!</Link>
      </RegisterText>
    </>
  );
};

export default Login;