import React, { useState } from "react";
// eslint-disable-next-line import/no-extraneous-dependencies
import { hot } from "react-hot-loader/root";
import styled from "styled-components";
import { Layout, Empty } from "antd";
import "./App.css";
// eslint-disable-next-line import/no-named-as-default
import Sidebar from "./components/Sidebar";
import Database from "./components/Database/Database";

const { Content } = Layout;

const AppLayout = styled(Layout)`
  height: 100vh;
`;

const AppContent = styled(Content)`
  background-color: white;
`;

const EmptyView = styled(Empty)`
  margin-top: 12em;
`;

function App() {
  const [currentDatabaseId, setCurrentDatabaseId] = useState(null);

  return (
    <div className="App">
      <AppLayout>
        <Sidebar currentDatabaseId={currentDatabaseId} onChange={setCurrentDatabaseId} />
        <AppContent>
          {currentDatabaseId ? (
            <Database key={currentDatabaseId} databaseId={currentDatabaseId} />
          ) : (
            <EmptyView description="No Database Selected" />
          )}
        </AppContent>
      </AppLayout>
    </div>
  );
}

export default process.env.NODE_ENV === "development" ? hot(App) : App;