import { Flex } from '@chakra-ui/react';
import { GetServerSideProps } from 'next';
import dynamic from 'next/dynamic';
import Head from 'next/head';
import Script from 'next/script';
import React, { useEffect, useMemo } from 'react';
import { container } from 'tsyringe';
import { FileTreeView } from '../components/FileTreeView';
// import { StartupView } from '../components/StartupView';
// import { UniverseView } from '../components/UniverseView';
import { useServiceContext } from '../hooks/useServiceContext';
import {
  workspaceServiceToken,
  WorkspaceService,
} from '../services/workspace/workspace.trait';
import { useMiraFiles, useWorkspaceFile } from '../state/workspace';
import { DevServerEvent } from '../types/devServer';
import { MiraMdxFileItem } from '../types/workspace';

interface PageProps {
  miraFiles?: MiraMdxFileItem<number>[];
}

const StartupView = dynamic(() => import('../components/StartupView'), {
  ssr: false,
});
const UniverseView = dynamic(() => import('../components/UniverseView'), {
  ssr: false,
});

export const getServerSideProps: GetServerSideProps<PageProps> = async () => {
  if (!container.isRegistered(workspaceServiceToken)) {
    return { props: {} };
  }
  const cli = container.resolve<WorkspaceService>(workspaceServiceToken);
  const miraFiles = await cli.service.getMiraFiles();
  return {
    props: { miraFiles },
  };
};

export default function Home({ miraFiles }: PageProps) {
  const { workspace } = useServiceContext();
  const constants = useMemo(() => workspace?.service.constants, [workspace]);
  const { setMiraFiles } = useMiraFiles();
  useEffect(() => {
    (async () => {
      const files =
        miraFiles ?? (workspace && (await workspace.service.getMiraFiles()));
      if (files) {
        setMiraFiles(
          files.map((it) => ({
            ...it,
            mtime: new Date(it.mtime),
          })),
        );
      }
    })();
  }, [miraFiles, setMiraFiles, workspace]);

  useEffect(() => {
    const fn = (event: CustomEvent<DevServerEvent>) => {
      console.log(event.detail);
      if (event.detail.type === 'watcher') {
        // TODO
      }
    };
    if (constants?.devServerWatcherUpdateEventName) {
      const eventName = constants.devServerWatcherUpdateEventName;
      window.addEventListener(eventName, fn as EventListener);
      return () => window.removeEventListener(eventName, fn as EventListener);
    }
  }, [constants]);

  const { activeMiraFile: file } = useWorkspaceFile();

  return (
    <>
      <Head>
        <title>Mira</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      {constants?.devServerWatcherImportPath && (
        <Script type="module" src={constants.devServerWatcherImportPath} />
      )}
      {constants?.hmrPreambleImportPath && (
        <Script type="module" src={constants.hmrPreambleImportPath} />
      )}

      <Flex alignItems="stretch" height="100vh">
        <Flex
          as="aside"
          flexBasis={40}
          overflow="auto"
          flexDir="column"
          alignItems="stretch"
          borderColor="gray.100"
          borderRightWidth={1}
        >
          <FileTreeView />
        </Flex>
        <Flex
          as="main"
          flex={1}
          overflow="auto"
          flexDir="column"
          alignItems="stretch"
        >
          {constants && file ? (
            <React.Suspense fallback={null}>
              <UniverseView {...{ constants, file }} />
            </React.Suspense>
          ) : (
            <StartupView />
          )}
        </Flex>
      </Flex>
    </>
  );
}