import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";

import GithubIssueList from "../src/GithubIssueList";
import Layout from "../src/Layout";
import { GithubIssueListParams } from "../src/data/GithubIssueList";

const PARAM_QUERY_KEY = "q";

export default function Page() {
  const router = useRouter();
  const [params, setParams] = useState(undefined);

  useEffect(() => {
    const paramsString = router.query[PARAM_QUERY_KEY] as string | undefined;
    if (paramsString) {
      try {
        setParams(JSON.parse(paramsString));
        return;
      } catch (e) {
        console.error(e);
      }
    }

    setParams(undefined);
  }, [router]);

  const changeParams = (params: GithubIssueListParams) => {
    let newQuery = { ...router.query };
    newQuery[PARAM_QUERY_KEY] = JSON.stringify(params);

    router.push(
      {
        pathname: router.pathname,
        query: newQuery,
      },
      undefined,
      { scroll: false }
    );
  };

  return (
    <Layout>
      <div className="flex flex-col space-y-4 mx-auto max-w-[1440px] px-4 mt-6">
        <GithubIssueList params={params} changeParams={changeParams} />
      </div>
    </Layout>
  );
}