import React from 'react'
import VersionsIcon from 'shared/components/icons/versions.js'
import Link from 'next/link'
import { useTranslation } from 'next-i18next'
import versions from 'site/versions.json'
import useVersion from 'site/hooks/useVersion.js'

export const defaultVersion = 'next'

export const formatVersionTitle = version => (!version || version === defaultVersion)
  ? `${defaultVersion} version`
  : `Version ${version}`

export const formatVersionUri = (version=false, design=false) => {
  if (!version && !design) return '/'
  if (!version && design) return `/${design}`
  if (version && !design) return `/v/${version}`

  return `/v/${version}/${design}`
}

const PatternPicker = ({ app }) => {
  const { t } = useTranslation(['common'])
  const version = useVersion()

  return (
      <div className="dropdown w-full md:w-auto">
        <div tabIndex="0" className={`
          m-0 btn btn-neutral flex flex-row gap-2 btn-outline
          md:btn-ghost
          hover:bg-neutral hover:border-neutral-content
        `}>
          <VersionsIcon />
          <span>{formatVersionTitle(version)}</span>
        </div>
        <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 overflow-y-scroll navdrop">
          {[defaultVersion, ...versions].map(v => (
            <li key={v}>
              <Link href={formatVersionUri(v)}>
                <button className="btn btn-ghost">
                  <span className="text-base-content captialize">
                    {formatVersionTitle(v)}
                  </span>
                </button>
              </Link>
            </li>
          ))}
        </ul>
      </div>
  )
}

export default PatternPicker