import PropTypes from 'prop-types'

import {jwennDenyeTeks} from '../../lib/oki-api'

import HeadLayout from '../../components/head-layout'

import Custom500 from '../500'
import TeksDrawer from '../../components/teks/teks-drawer'

export default function Teks({errorCode, errorMessage, denyeTeks}) {
  if (errorCode) {
    console.log('⚠️ error', errorMessage)
    return <Custom500 />
  }

  return (
    <HeadLayout title='Paroles et Traductions' summary='Retrouvez les paroles et traductions de vos chansons préférées.' tab={2} slug='paroles'>
      <TeksDrawer denyeTeks={denyeTeks} />
    </HeadLayout>
  )
}

export async function getServerSideProps() {
  let denyeTeks
  let hasError
  let errorMessage

  try {
    denyeTeks = await jwennDenyeTeks()
  } catch (error) {
    errorMessage = error.message
    hasError = true
  }

  return {
    props: {
      errorCode: hasError || null,
      errorMessage: errorMessage || null,
      denyeTeks: denyeTeks || null
    }
  }
}

Teks.defaultProps = {
  errorCode: null,
  errorMessage: null,
  denyeTeks: null
}

Teks.propTypes = {
  errorCode: PropTypes.bool,
  errorMessage: PropTypes.string,
  denyeTeks: PropTypes.array
}