import React, { useEffect, useState } from 'react'
import { t } from '$themelocalization'
import './RefreshPreviewButton.scss'

const RefreshPreviewButton = ({showRefreshPreview, onProofPreviewClick, disabled}) => {
  const [isDisabled, setIsDisabled] = useState(false)

  useEffect(() => {
      setIsDisabled(disabled)
  }, [disabled])

  return showRefreshPreview ?
    <>
      <div className="button button-secondary refresh-preview"
           disabled={isDisabled}
           role="button" tabIndex={isDisabled ? -1 : 0} aria-disabled={isDisabled || undefined}
           onClick={isDisabled ? undefined : onProofPreviewClick}
           onKeyDown={(e) => { if ((e.key === 'Enter' || e.key === ' ') && !isDisabled) { e.preventDefault(); onProofPreviewClick() } }}>
        {t('productProof.RefreshPreview')}
      </div>
      <span role="status" aria-live="assertive" style={{position: 'absolute', width: '1px', height: '1px', overflow: 'hidden', clip: 'rect(0,0,0,0)'}}>
        {isDisabled ? t('General.Loading') : ''}
      </span>
    </>  : null
}

export default RefreshPreviewButton
