import BookListItem from '@/components/BookListItem/BookListItem'
import Grid from '@/components/Grid/Grid'
import DefaultLayout from '@/layouts/DefaultLayout/DefaultLayout'
import { getStaticEntries } from '@/lib/content'
import { NextSeo } from 'next-seo'

export const Title = 'Library'

export const getStaticProps = () => ({
  props: {
    bookEntries: getStaticEntries('./content/books')
  }
})

const SORT_TITLE = 'title'
const SORT_RATING = 'rating'

export default function Library ({ bookEntries }) {
  // const tags = getTags(bookEntries)

  // const [sorter, setSorter] = useState(SORT_TITLE)

  // console.log(bookEntries)

  return (
    <DefaultLayout>
      <NextSeo
        title={Title}
        openGraph={
          {
            title: Title
          }
        }
      />

      <h1>{Title}</h1>

      <section>
        <div className='form-group'>
          <label htmlFor='sortBy'>Sort by:&nbsp;</label>
          <select id='sortBy' name='sort-by'>
            <option value={SORT_TITLE}>Title (A-Z)</option>
            <option value={SORT_RATING}>Rating (5-0)</option>
            {/* <optgroup label="Genre">
              {Object.keys(tags).sort().map(tag => (
                <option>{tag}</option>
              ))}
            </optgroup> */}
          </select>
        </div>

        <Grid columns={4}>
          {bookEntries.map((entry, i) => (
            <BookListItem key={entry.attributes.title} {...entry.attributes} href={`/library/${entry.slug}`} />
          ))}
        </Grid>
      </section>
    </DefaultLayout>
  )
}

// function getTags (bookEntries) {
//   const tags = {}
//   for (const entry of bookEntries) {
//     const entryTags = entry.attributes.tags.split(', ')
//     for (const entryTag of entryTags) {
//       tags[entryTag] = tags[entryTag] ? tags[entryTag] + 1 : 1
//     }
//   }

//   return tags
// }
