import { useTranslation } from 'react-i18next'
import Icon from '../../../shared/components/icon'
import PropTypes from 'prop-types'
import { memo } from 'react'

export function PdfLogsButtonContent({
  showLogs,
  logEntries,
  codeCheckFailed,
}) {
  const { t } = useTranslation()

  if (showLogs) {
    return (
      <>
        <Icon type="file-pdf-o" />
        <span className="toolbar-text toolbar-hide-small">{t('view_pdf')}</span>
      </>
    )
  }

  if (codeCheckFailed) {
    return (
      <>
        <Icon type="exclamation-triangle" />
        <span className="toolbar-text toolbar-hide-small">
          {t('code_check_failed')}
        </span>
      </>
    )
  }

  const count = logEntries?.errors?.length || logEntries?.warnings?.length

  if (!count) {
    return (
      <>
        <Icon type="file-text-o" />
        <span className="toolbar-text toolbar-hide-small">
          {t('view_logs')}
        </span>
      </>
    )
  }

  return (
    <>
      <Icon type="file-text-o" />
      <span className="btn-toggle-logs-label toolbar-text toolbar-hide-small">
        {logEntries.errors?.length
          ? t('your_project_has_an_error', { count })
          : t('view_warning', { count })}
        <span className="sr-hidden">
          {count > 1 && ` (${count > 99 ? '99+' : count})`}
        </span>
      </span>
    </>
  )
}

PdfLogsButtonContent.propTypes = {
  codeCheckFailed: PropTypes.bool,
  showLogs: PropTypes.bool,
  logEntries: PropTypes.object,
}

export default memo(PdfLogsButtonContent)