import React, { useContext } from 'react'
import { Strings } from '../i18n'
import semver from 'semver'
import appManifest from '../appManifest'
import { Banner } from './Banner'
import { UserContext } from '../contexts/UserContext'
import { open } from '../util'

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

  const diff = semver.diff(appManifest.version, user.updateSeenVersion)
  const significantUpdate = ['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(appManifest.version)
        open(appManifest.extra.releaseNotesUrl)
      }}
      onDismiss={() => user.setUpdateSeenVersion(appManifest.version)}
    />
  )
}