@page "/"
@using Portfolio.Shared.Models
@using Portfolio.Shared.Services
@using Portfolio.Web.Components.Components

<section id="hero">
    <div class="artwork">
        <div class="circle big-circle"></div>
        <div class="circle small-circle"></div>
        <div class="circle image"></div>
    </div>
    <h2>
        <span id="welcome">Hallo, ich bin Leon Hoppe,</span><br>
        <span id="jobs"></span>
    </h2>
    <p>
        Auf dieser Seite erfahren Sie, an welchen Projekten ich bereits gearbeitet habe,<br>
        was meine Programmierkenntnisse sind und welche Pläne ich für die Zukunft habe.
    </p>
    <a href="#projects" id="main-action">Mehr erfahren</a>
</section>

<section id="projects">
    <h2 class="title">Projekte</h2>
    <a href="/projects">alle ansehen</a>
    <div id="projects-wrapper">
        @foreach (var (index, project) in _projects.Index()) {
            <ProjectView Project="project" Index="index" />
        }
    </div>
</section>

<section id="technologies">
    <h2 class="title">Technologien</h2>
    <a href="/technologies">mehr erfahren</a>
    <div class="technologies-wrapper">
        @foreach (var technology in _technologies) {
            <TechnologyView Technology="technology" />
        }
    </div>
</section>

<section id="about">
    <h2 class="title">Über mich</h2>
    <a href="/about">mehr erfahren</a>
    <div class="timeline">
        @foreach (var (index, timestamp) in _timeline.Index()) {
            <TimestampView Entry="timestamp" Index="index" />
        }
    </div>
</section>

<script>
    const displayElement = document.querySelector('#jobs');
    const jobs = {
        current: 0,
        all: ["Full stack developer", "C# developer", "Java developer"],
        state: 0,
        display: ""
    };

    setInterval(() => {
        if (jobs.state === 0) {
            const len = jobs.display.length;
            jobs.display = jobs.all[jobs.current].slice(0, len + 1);

            if (jobs.display.length >= jobs.all[jobs.current].length) jobs.state = 1;
        } else if (jobs.state === 50) {
            const len = jobs.display.length;
            jobs.display = jobs.display.slice(0, len - 1);

            if (jobs.display.length <= 1) {
                jobs.state = 0;
                jobs.current = (jobs.current + 1) % jobs.all.length;
            }
        } else {
            jobs.state++;
        }
        
        displayElement.innerText = jobs.display;
    }, 50)

</script>

@inherits CancellableComponent

@inject IProjectRepository ProjectRepository
@inject ITechnologyRepository TechnologyRepository
@inject ITimelineRepository TimelineRepository

@code {

    private IEnumerable<Project> _projects = [];
    private IEnumerable<Technology> _technologies = [];
    private IEnumerable<TimelineEntry> _timeline = [];

    protected override async Task OnInitializedAsync() {
        var projects = await ProjectRepository.GetProjects(TokenSource.Token);
        _projects = projects.Where(p => p.Featured);

        var technologies = await TechnologyRepository.GetTechnologies(TokenSource.Token);
        _technologies = technologies.Where(t => t.Featured);

        var carrierTimeline = await TimelineRepository.GetTimeline(TimelineEntryType.Carrier, TokenSource.Token);
        var experienceTimeline = await TimelineRepository.GetTimeline(TimelineEntryType.Experience, TokenSource.Token);
        _timeline = experienceTimeline
            .Aggregate(carrierTimeline, (current, entry) => current.Append(entry))
            .Where(t => t.Featured)
            .OrderBy(t => t.Date);
    }

}