import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import React, { useState } from 'react';
import LoginForm from '../components/LoginForm';
import PocketBase from 'pocketbase';

const pb = new PocketBase('http://127.0.0.1:8090');

async function fetchData(email, pass) {
  console.log(email, pass);
  // or fetch only the first record that matches the specified filter
  try {
    const record = await pb
      .collection('admins')
      .getFirstListItem(`email="${email}" && password="${pass}"`, {
        expand: 'relField1,relField2.subRelField',
      });
    if (record) {
      console.log(record);
      return record;
    } else {
      console.log('user not found');
    }
  } catch (error) {
    console.log(error);
  }
}

function Login() {
  const adminUser = {
    email: '[email protected]',
    password: '123456',
  };
  const [user, setUser] = useState({ email: '' });
  const [error, setError] = useState('');

  const Login = (details) => {
    console.log(details);
    const isValid = fetchData(details.email, details.password);
    console.log(isValid);
    if (isValid.length > 0) {
      console.log('Logged IN');
      setUser({
        email: details.email,
      });
    } else {
      console.log('Details do not match');
      setError('Details do not match');
    }
  };

  const Logout = () => {
    console.log('logout');
    setUser({ email: '' });
  };

  return (
    <div className='container-l'>
      {user.email != '' ? (
        <div>
          <h2>Welcome {user.email}</h2>
          <Button onClick={Logout}>Logout</Button>
        </div>
      ) : (
        <LoginForm Login={Login} error={error} />
      )}
    </div>
  );
}

export default Login;