import Page from 'site/components/wrappers/page.js'
import useApp from 'site/hooks/useApp.js'
import Link from 'next/link'
import PageLink from 'shared/components/page-link.js'
import TimeAgo from 'react-timeago'
import { strapiHost } from 'shared/config/freesewing.mjs'
import { strapiImage } from 'shared/utils.js'
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

export const PreviewTile = ({ img, slug, title }) => (
  <div
    style={{ backgroundImage: `url(${img})`, backgroundSize: 'cover' }}
    className={`
      rounded-full inline-block border-base-100 shrink-0
      w-40 h-40 -ml-8 border-8
      md:w-56 md:h-56 md:-ml-12
      theme-gradient
    `}
  >
    <Link href={`/showcase/${slug}`}>
      <a className={`
        w-42 h-42 block
        md:w-56 md:h-56
        `} title={title}/>
    </Link>
  </div>
)

const DesignPosts = ({ design, posts }) => {
  const { t } = useTranslation(['patterns'])
  return (
    <div className='py-2'>
      <h2>
        <Link href={`/showcase/designs/${design}`}>
          <a className="hover:text-secondary-focus hover:underline">{t(`${design}.t`)}</a>
        </Link>
      </h2>
      <div className={`
        flex flex-row overflow-visible
        -mr-8 pl-8
        md:-mr-12 md:pl-12
      `}>
      {posts.slice(0, 10).map(post => <PreviewTile
        img={`${strapiHost}${post?.image?.sizes?.medium?.url}`}
        slug={post.slug}
        title={post.title}
        key={post.slug}
      />)}
      </div>
    </div>
  )
}

const ShowcaseIndexPage = (props) => {
  const app = useApp()
  const { t } = useTranslation()

  const designs = {}
  for (const post of props.posts) {
    for (const design of post.designs) {
      if (typeof designs[design] === 'undefined') designs[design] = []
      designs[design].push(post)
    }
  }

  return (
    <Page app={app} title={t('showcase')} slug='showcase'>
      <div className="max-w-4xl m-auto text-center px-8">
        <ul className="flex flex-row flex-wrap gap-4 items-center justify-center leading-tight text-xl">
          {Object.keys(designs).sort().map(design => (
            <li key={design}>
              <PageLink href={`/showcase/design/${design}`} txt={design} className="capitalize" />
            </li>
          ))}
        </ul>
      </div>
      <div className={`
        px-8 2xl:pl-16 overflow-visible overscroll-x-hidden
        max-w-sm
        md:max-w-md
        lg:max-w-lg
        xl:max-w-3xl
        2xl:max-w-7xl
      `}>
        {Object.keys(designs).sort().map(design => <DesignPosts
          key={design} design={design} posts={designs[design]} />)}
      </div>
    </Page>
  )
}

export default ShowcaseIndexPage

/*
 * getStaticProps() is used to fetch data at build-time.
 *
 * On this page, it is loading the showcase content from strapi.
 *
 * This, in combination with getStaticPaths() below means this
 * page will be used to render/generate all showcase content.
 *
 * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
 */
export async function getStaticProps({ params, locale }) {

  const posts = await fetch(
    `${strapiHost}/showcaseposts?_locale=${locale}&_sort=date:DESC&_limit=-1`
  )
  .then(response => response.json())
  .then(data => data)
  .catch(err => console.log(err))

  return {
    props: {
      posts: posts.map(post => {
        const designs = [post.design1]
        if (post.design2 && post.design2.length > 2) designs.push(post.design2)
        if (post.design3 && post.design3.length > 2) designs.push(post.design3)
        return {
          slug: post.slug,
          title: post.title,
          date: post.date,
          maker: post.maker.displayname,
          image: strapiImage(post.image, ['medium']),
          designs
        }
      }),
      ...(await serverSideTranslations(locale)),
    }
  }
}