import { div, span, main, section, aside, h3, p, ul, li, header, nav, a } from '@laniakeasupercluster/widgets'

const navData = [
    { id: '1', name: 'Home', path: '/' },
    { id: '2', name: 'Blog', path: '/blog' },
    { id: '3', name: 'About', path: '/about' },
    { id: '4', name: 'Contact', path: '/contact' }
]

document.body.appendChild(header.flex({ justifyContent: 'space-between', alignItems: 'center' }).childs([
    nav.flex({ gap: '1rem' }).childs(navData.map(item => {
        const link = document.createElement('a')
        link.href = item.path
        link.textContent = item.name
        link.style.padding = '.5rem'
        link.style.borderRadius = '.25rem'
        link.style.color = (item.path === window.location.pathname) ? '#00C16A' : '#333'
        link.onclick = (event) => {
            event.preventDefault()
            window.history.pushState({}, '', event.target.href)
            Array.from(event.target.parentElement.children).forEach(x => x.style.color = '#333')
            event.target.style.color = '#00C16A'
        }
        return link
    })),
    div.text('sign'),
]))

const blogata = await fetch('/api/blog').then(res => res.text())
console.log(blogata)

const blogData = [
    { id: '1', title: 'Blog 1', content: 'Content 1', date: new Date() },
    { id: '2', title: 'Blog 2', content: 'Content 2', date: new Date() },
    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
    { id: '3', title: 'Blog 3', content: 'Content 3', date: new Date() },
]
const tagData = ['JavaScript', 'CSS', 'HTML', 'Web', 'JavaScript', 'CSS', 'HTML', 'Web', 'JavaScript', 'CSS', 'HTML', 'Web', 'JavaScript', 'CSS', 'HTML', 'Web']
const articleData = ['Article 1', 'Article 2', 'Article 3']

document.body.appendChild(div.grid({ gridTemplateColumns: '3fr 1fr', gap: '1rem' }).w('1280px').mx('auto').p('1rem').childs([
    main.grid({ gap: '1rem' }).childs(blogData.map(blog => section.childs([
        h3.text(blog.title),
        p.text(blog.content),
        p.text(blog.date),
    ]))),
    aside.flex({ gridColumn: '2', flexDirection: 'column', gap: '1rem' }).childs([
        div.childs([
            h3.font('bold').text('TAG'),
            div.flex({ gap: '.5rem', flexWrap: 'wrap' }).childs([
                // cursor-pointer overflow-clip hover:text-pink-500
                ...tagData.map(tag => span.bg('rgba(200,200,200,.2)').radius('.25rem').px('8px').text(tag))
            ]),
        ]),
        div.childs([
            h3.font('bold').text('归档'),
            ul.childs(articleData.map(article => li.text(article))),
        ]),
    ]),
]))

const style = document.createElement('style')
style.textContent = `
    body {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        font-family: inherit;
    }
    body > header {
        gap: 1rem;
        width: 100%;
        line-height: 4rem;
        border-bottom: 1px solid #f5f6f5;
    }
    body header nav {
        display: flex;
        gap: 1rem;
        font-weight: bold;
        font-size: 1.25rem;
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 1.3rem;
        box-sizing: border-box;
    }
    body aside h3 {        
        font-size: 1rem;
        font-weight: 700;
    }
    body aside h3::before {
        content: '# ';
        color: #00C16A;
    }
`
document.head.appendChild(style)