import { useI18n } from 'domains/i18n/hooks'
import { className } from 'lib/css'
import { useState } from 'preact/hooks'
import Icon from 'ui/components/layout/icon'
import Lightbox from 'ui/components/widgets/lightbox'

const ImageLightbox = ({ description, url }) => {
  const { t } = useI18n()
  const [showLightBox, setShowLightBox] = useState(false)

  const onOpenLightboxHandler = () => {
    setShowLightBox(true)
  }

  const onCloseLightboxHandler = () => {
    setShowLightBox(false)
  }

  return (
    <>
      <button
        type="button"
        className={className('modal__enlarge')}
        onClick={onOpenLightboxHandler}
      >
        {t('message.image.srTextEnlargeButtonLabel', { description })}
        <Icon name="enlarge" size="32" alt="" />
      </button>
      {showLightBox && (
        <Lightbox
          url={url}
          description={description}
          onClose={onCloseLightboxHandler}
        />
      )}
    </>
  )
}

export default ImageLightbox