import Live2D from '@/components/Live2D'
import { siteConfig } from '@/lib/config'
import { useGlobal } from '@/lib/global'
import dynamic from 'next/dynamic'
import Link from 'next/link'
import Announcement from './Announcement'
const ExampleRecentComments = dynamic(
  () => import('./RecentCommentListForExample')
)

/**
 * 侧边栏
 */
export const SideBar = props => {
  const { locale } = useGlobal()
  const { latestPosts, categoryOptions, notice } = props
  return (
    <div className='w-full md:w-64 sticky top-8'>
      <aside className='rounded shadow overflow-hidden mb-6'>
        <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
          {locale.COMMON.CATEGORY}
        </h3>

        <div className='p-4'>
          <ul className='list-reset leading-normal'>
            {categoryOptions?.map(category => {
              return (
                <Link
                  key={category.name}
                  href={`/category/${category.name}`}
                  passHref
                  legacyBehavior>
                  <li>
                    {' '}
                    <a
                      href={`/category/${category.name}`}
                      className='text-gray-darkest text-sm'>
                      {category.name}({category.count})
                    </a>
                  </li>
                </Link>
              )
            })}
          </ul>
        </div>
      </aside>
      <aside className='rounded shadow overflow-hidden mb-6'>
        <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
          {locale.COMMON.LATEST_POSTS}
        </h3>

        <div className='p-4'>
          <ul className='list-reset leading-normal'>
            {latestPosts?.map(p => {
              return (
                <Link key={p.id} href={`/${p.slug}`} passHref legacyBehavior>
                  <li>
                    {' '}
                    <a
                      href={`/${p.slug}`}
                      className='text-gray-darkest text-sm'>
                      {p.title}
                    </a>
                  </li>
                </Link>
              )
            })}
          </ul>
        </div>
      </aside>
      {/* 公告栏 */}
      <Announcement post={notice} />

      {/* 最近评论 */}
      {siteConfig('COMMENT_WALINE_SERVER_URL') &&
        siteConfig('COMMENT_WALINE_RECENT') && (
          <aside className='rounded shadow overflow-hidden mb-6'>
            <h3 className='text-sm bg-gray-100 text-gray-700 dark:bg-hexo-black-gray dark:text-gray-200 py-3 px-4 dark:border-hexo-black-gray border-b'>
              {locale.COMMON.RECENT_COMMENTS}
            </h3>

            <div className='p-4'>
              <ExampleRecentComments />
            </div>
          </aside>
        )}
      <aside className='rounded  overflow-hidden mb-6'>
        <Live2D />
      </aside>
    </div>
  )
}