import {useCallback} from 'react';
import {LoginForm} from './LoginForm';
import { useNavigate } from 'react-router-dom';
import {useAppDispatch, useAppSelector} from "../../../redux/configureStore";
import {selectLoginLoading} from '../../slice/selectors.js'
import {getCurrentUser, login} from '../../slice/thunks.js'

export const LoginPage = () => {
  const navigate = useNavigate();
  const loading = useAppSelector(selectLoginLoading);
  const dispatch = useAppDispatch();

  const onLogin = useCallback(
    values=> {
      dispatch(
        login({
          params: values,
          resolve: () => {
            dispatch(getCurrentUser())
            navigate('/main')
          },
        }),
      )
    },[])
  return (
    <LoginForm loading={loading} onLogin={onLogin} />
  );

};

