import { useState, useEffect } from 'preact/hooks';
import './style.css';

// Components 

import Cell from '../../components/Cell/Cell.jsx';
import CellInput from '../../components/Cell/CellInput.jsx';
import CellOutput from '../../components/Cell/CellOutput.jsx';

import StatsChart from '../../components/StatsChart/StatsChart.jsx';

import StatusBar from '../../components/StatusBar/StatusBar.jsx';
import Loading from '../../components/Loading/Loading.jsx';
import Links from '../../components/Links/Links.jsx';

const linksCode = `# Loading Dataframe
from utils import link_container
import pandas as pd

links = pd.read_csv('ifn_links.csv')
links.drop_duplicates()
for index, link in links.iterrows():
    link_container.attach(index, link)
link_container.show()
`

const statsCode = `# Plotting Statistics
import matplotlib.pyplot as plt
import numpy as np

plt.title("Stats")
plt.bar("Links Loaded", len(links))
for link in links:
    plt.bar(link, np.random.randint(1, len(links) - 1))
plt.show()
`

const getMockLinks = () => {
  return [
    {
      id: 'jupyterhub',
      config: {
        title: 'Jupyter Hub',
        link: `${window.location.origin}/jupyter`,
        description: 'The main System build on top of Docker',
        tags: ['Teaching', 'Docker']
      },
      icon: 'https://jupyter.org/assets/homepage/main-logo.svg'
    },
    {
      id: 'ifnwebsite',
      config: {
        title: 'IFN Website',
        link: 'https://www.tu-braunschweig.de/ifn',
        description: 'All about the institut',
        tags: ['Info']
      },
      icon: 'https://www.tu-braunschweig.de/fileadmin/Logos_Einrichtungen/Institute_FK5/logo_IFN.svg'
    },
    {
      id: 'course-prog',
      config: {
        title: 'Lehrseite',
        link: 'https://www.tu-braunschweig.de/ifn/edu/ws/einfuehrung-in-die-programmierung-fuer-nicht-informatiker',
        description: 'Useful Stuff about the course',
        tags: ['Info', 'Teaching']
      },
      icon: 'https://www.tu-braunschweig.de/fileadmin/Logos_Einrichtungen/Institute_FK5/logo_IFN.svg'
    },
  ];
};



export default function Home() {
    const [links, setLinks] = useState([]);
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
        const delay = 500 + Math.random() * 1500;
        const timer = setTimeout(() => {
            setLinks(getMockLinks())
            setLoading(false);
        }, delay)

        return () => clearTimeout(timer);
    }, []);

    return (
        <div class="notebook-container">
            <div class="notebook-header">
                <div class="header-container">
                    <h1 class="notebook-title">Teaching System</h1>
                    <img class="notebook-img" src="https://www.tu-braunschweig.de/fileadmin/Logos_Einrichtungen/Institute_FK5/logo_IFN.svg" />
                </div>
                <div class="notebook-subtitle">
                    A linktree of all available systems
                </div>
            </div>

            <Cell>
                <CellInput>
                    {linksCode}
                </CellInput>

                <CellOutput>
                    {loading ? (<Loading />) : (<Links links={links} />)}
                </CellOutput>
            </Cell>

            <Cell>
                <CellInput>
                    {statsCode}
                </CellInput>
                <CellOutput>
                    <StatsChart links={links}/>
                </CellOutput>
            </Cell>

            <StatusBar links={links}/>

        </div>
    );
}