import React from 'react'
import arcmIcons from '../../Icons'
import { useArchivedOrder } from '../../context/ArchivedOrderContext'

const ProgressSection = () => {
  const {
    exportStatus,
    percentage,
    handleExportCancelModal,
    startBgUnarchiving,
    unarchivePercentage,
    handleUnarchiveCancelModal,
    t
  } = useArchivedOrder()
  return (
    <>
      {exportStatus === 'start-exporting' && (
        <div className=' arcm-bg-white arcm-p-6 arcm-mb-4 arcm-rounded-md'>
          <div className='arcm-text-gray-800 arcm-text-lg sm:arcm-text-xl arcm-font-bold arcm-mb-1.5'>
            {t('exporting_progress')
              .replace('%s', percentage)
              .replace('%%', '%')}
          </div>
          <div className='archive-progress__bar arcm-mb-2 arcm-max-w-[411px] arcm-relative arcm-h-5 arcm-pr-[471px] arcm-bg-[#d8dee2] arcm-rounded arcm-overflow-hidden'>
            <div
              className='archive-progress__bar-inner arcm-absolute arcm-top-0 arcm-left-0 arcm-h-full arcm-bg-emerald-500'
              style={{ width: percentage + '%' }}
            ></div>
          </div>
          <div className='arcm-text-gray-900 arcm-text-sm arcm-font-normal arcm-inline-flex arcm-items-center arcm-gap-1.5'>
            <span className='icon'>{arcmIcons.spinning}</span>
            {t('woocommerce_orders')}
          </div>
          <div className='btn-box arcm-mt-3'>
            <button
              onClick={handleExportCancelModal}
              className='arcm-text-[#EF4444] arcm-text-sm arcm-font-semibold arcm-min-w-[140px] arcm-px-4 arcm-py-2.5 arcm-rounded-lg arcm-border arcm-border-[#EF4444] arcm-bg-white arcm-transition-all hover:arcm-bg-[#F44336] hover:arcm-text-white'
            >
              {t('cancel')}
            </button>
          </div>

          <div className='arcm-text-gray-900 arcm-text-sm arcm-font-normal arcm-mt-3'>
            {t('background_process_notice').replace('%s', t('exporting'))}
          </div>
        </div>
      )}

      {startBgUnarchiving === 'start-unarchiving' && (
        <div className=' arcm-bg-white arcm-p-6 arcm-mb-4 arcm-rounded-md'>
          <div className='arcm-text-gray-800 arcm-text-lg sm:arcm-text-xl arcm-font-bold arcm-mb-1.5'>
            {t('unarchiving_process_title')
              .replace('%s', unarchivePercentage)
              .replace('%%', '%')}
          </div>
          <div className='archive-progress__bar arcm-mb-2 arcm-max-w-[411px] arcm-relative arcm-h-5 arcm-pr-[471px] arcm-bg-[#d8dee2] arcm-rounded arcm-overflow-hidden'>
            <div
              className='archive-progress__bar-inner arcm-absolute arcm-top-0 arcm-left-0 arcm-h-full arcm-bg-emerald-500'
              style={{ width: unarchivePercentage + '%' }}
            ></div>
          </div>
          <div className='arcm-text-gray-900 arcm-text-sm arcm-font-normal arcm-inline-flex arcm-items-center arcm-gap-1.5'>
            <span className='icon'>{arcmIcons.spinning}</span>
            {t('woocommerce_orders')}
          </div>
          <div className='btn-box arcm-mt-3'>
            <button
              onClick={handleUnarchiveCancelModal}
              className='arcm-text-[#EF4444] arcm-text-sm arcm-font-semibold arcm-min-w-[140px] arcm-px-4 arcm-py-2.5 arcm-rounded-lg arcm-border arcm-border-[#EF4444] arcm-bg-white arcm-transition-all hover:arcm-bg-[#F44336] hover:arcm-text-white'
            >
              {t('cancel')}
            </button>
          </div>

          <div className='arcm-text-gray-900 arcm-text-sm arcm-font-normal arcm-mt-3'>
            {t('background_process_notice').replace('%s', t('unarchiving'))}
          </div>
        </div>
      )}
    </>
  )
}

export default ProgressSection