import React, { useContext } from 'react'
import semver from 'semver'

import manifest from '../appManifest'
import { UserContext } from '../contexts/UserContext'
import { Strings } from '../i18n'
import { open } from '../util'
import { Banner } from './Banner'

export const WhatsNewBanner: React.FC = () => {
  const user = useContext(UserContext)
  if (!user?.updateSeenVersion) return null

  const diff = semver.diff(manifest.version, user.updateSeenVersion)
  const significantUpdate = diff != null && ['major', 'minor'].includes(diff)
  if (!significantUpdate) return null

  return (
    <Banner
      title={Strings.Shared.WhatsNew}
      acceptText={Strings.Shared.SeeWhatsNew}
      dismissText={Strings.Shared.Dismiss}
      onAccept={() => {
        user.setUpdateSeenVersion(manifest.version)
        open(manifest.extra.releaseNotesUrl)
      }}
      onDismiss={() => user.setUpdateSeenVersion(manifest.version)}
    />
  )
}