import { defineComponent } from "vue";
import useAsyncState from "@/useAsyncState.ts";
import getDjAPI from "@/api.ts";
import { RouterLink } from "vue-router";
import { addCSS, css } from "@/util.ts";

const style = css`
.entry {
    display: flex;
    flex-direction: row;
    gap: 4px;
}
`;

export default defineComponent({
    name: "DjBlogMain",
    async setup() {
        addCSS('DjBlogMain', style);

        const blogEntries = useAsyncState('blog-entries-meta', ({ hostUrl }) => getDjAPI(hostUrl, "/blog-entries"));

        await blogEntries.done;

        return () => <>
            <main>
                <h2>Entries</h2>
                <ul>
                    {blogEntries.result.value?.map(_ => (
                        <li key={_.slug}>
                            <div class="entry">
                                <RouterLink to={{ name: 'DjBlogEntry', params: { slug: _.slug }}}>{ _.title }</RouterLink>
                                <span>-</span>
                                <time datetime={ _.createdAt }>{ new Date(_.createdAt).toLocaleDateString() }</time>
                            </div>
                        </li>
                    )) ?? <li>Blog posts loading...</li>}
                </ul>
            </main>
        </>;
    },
});