import { useNavigate, Link } from 'react-router-dom'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

import { fetchPageList, postNewPage } from '../apiTools.jsx';
import { useFixLinks } from '../clientStuff.jsx';

import PageList from './PageList.jsx';
import GraphRender from './GraphRender.jsx';

import './Landing.css'

function Landing() {
  const queryClient = useQueryClient();
  const navigate = useNavigate();

  const makeNewPage = useMutation({ // for changing the value when we're done with it
    mutationFn: () => postNewPage()
        .catch((error) => { console.log("got an error", error.json()) }),
    onSettled: async (data, error, variables) => {
      // Invalidate and navigate to the new page
      await queryClient.invalidateQueries({ queryKey: ['pages'] });
      navigate(`/${data}/edit`);
    },
  });

  return (
    <div className="landing-page">
      <header>
        <h1>Welcome to the forest.</h1>
        <hr/>
      </header>
      <div className="landing-container">
        <section className="landing-section">
          <GraphRender />
        </section>
        <section className="landing-section">
          <PageList />
        </section>
        <section className="landing-section">
          <button>Sign up</button><br/>
          <button>Log in</button><br/>
          <button onClick={makeNewPage.mutate} >Dig new room!</button><br/>
        </section>
      </div>
    </div>
  );
}

export default Landing;