<script lang="ts">
    import IconPencil from 'virtual:icons/heroicons-outline/pencil'
    import { page } from '$app/stores'
    import COMPONENT_API from '../../../generated/COMPONENT_API.json'

    export let fileName = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1).replace('.html', '')

    export let title = ''
    if (!title) title = fileName

    let editUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`

    let api
    if ($page.url.pathname.includes('components')) {
        if (import.meta.env.DEV) {
            import(`../../../lib/components/${title}.svelte?raw&sveld`).then(output => api = output.default)
        } else {
            api = COMPONENT_API[`${title}.svelte`]
        }
    }
</script>

<svelte:head>
    <title>{title ? `${title} - Omorphia` : 'Omorphia'}</title>
</svelte:head>

<article>
    {#if title}<h1>{title}</h1>{/if}
    <a class="edit-link" href={editUrl}>
        <IconPencil/>
        Edit this page on GitHub</a>
    <slot/>

    {#if api}
        <div class="extra-info">
            {#if api.props.length > 0}
                <h2>Properties</h2>
                <table class="api-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Default</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                    {#each api.props as prop}
                        <tr>
                            <td><code>{prop.name}</code></td>
                            <td><code>{prop.type ?? ''}</code></td>
                            <td><code>{prop.value ?? ''}</code></td>
                            <td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
                        </tr>
                    {/each}
                    </tbody>
                </table>
            {/if}
            {#if api.events.length > 0}
                <h2>Events</h2>
                <table class="api-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Forwarded</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                    {#each api.events as event}
                        <tr>
                            <td><code>{event.name}</code></td>
                            <td>{!!event.parent}</td>
                            <td>{event.description?.replace('null', '') || ''}</td>
                        </tr>
                    {/each}
                    </tbody>
                </table>
            {/if}
            {#if api.slots.length > 0}
                <h2>Slots</h2>
                <table class="api-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Fallback</th>
                    </tr>
                    </thead>
                    <tbody>
                    {#each api.slots as slot}
                        <tr>
                            <td><code>{slot.name}</code></td>
                            <td>{slot.fallback ?? 'None'}</td>
                        </tr>
                    {/each}
                    </tbody>
                </table>
            {/if}
        </div>
    {/if}
</article>

<style lang="postcss">
    article {
        max-width: 800px;
        padding: 5rem 1rem;
    }

    .edit-link {
        display: flex;
        align-items: center;
        grid-gap: 8px;
        margin-bottom: 54px;
        color: var(--accent-color);
    }

    .extra-info {
        margin-top: 64px;
    }

    .api-table {
        border-collapse: collapse;
        margin-top: -6px;
    }

    .api-table tr {
        background-color: transparent;
        border: none;
    }

    .api-table tbody {
        border: 2px solid grey;
    }

    .api-table th {
        text-transform: uppercase;
        font-size: 12.5px;
        border: none;
    }
</style>