import Link from 'next/link'
import { useRouter } from 'next/router'
import { Dropdown } from '@primer/components'
import { useMainContext } from './context/MainContext'
import { useVersion } from './hooks/useVersion'

export const VersionPicker = () => {
  const router = useRouter()
  const { currentVersion } = useVersion()
  const { allVersions } = useMainContext()

  const versions = Object.values(allVersions)
  const activeVersion = allVersions[currentVersion]

  return (
    <div className="ml-4 d-flex flex-justify-center flex-items-center">
      <Dropdown css>
        <summary>
          {activeVersion.versionTitle}
          <Dropdown.Caret />
        </summary>
        <Dropdown.Menu direction="sw">
          {versions.map((version) => {
            return (
              <Dropdown.Item key={version.version}>
                <Link
                  href={{
                    pathname: router.pathname,
                    query: {
                      ...router.query,
                      versionId: version.version,
                    },
                  }}
                >
                  <a>{version.versionTitle}</a>
                </Link>
              </Dropdown.Item>
            )
          })}
        </Dropdown.Menu>
      </Dropdown>
    </div>
  )
}