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

const ArchivedOrdersTable = () => {
  const {
    tableLoading,
    orders,
    handleSelectOrder,
    singleOrderId,
    singleDuplicateCheckLoading,
    singleOrderUnarchive,
    currentPage,
    totalPages,
    handlePageChange,
    totaOrderNumber,
    ordersPerPage,
    startIndex,
    isSyncEmptyResult,
    t
  } = useArchivedOrder()

  return (
    <div className='arcm-overflow-hidden arcm-mb-6'>
      <table className='arcm-min-w-full arcm-mt-0 arcm-table-fixed'>
        <colgroup>
          <col className='arcm-w-12' />
          <col className='arcm-w-24' />
          <col className='arcm-w-32' />
          <col className='arcm-w-48' />
          <col className='arcm-w-32' />
          <col className='arcm-w-32' />
        </colgroup>
        <tbody className=''>
          {tableLoading ? (
            <tr>
              <td colSpan={6} className='arcm-h-[240px]'>
                <span className='arcm-table-loader arcm-w-full arcm-h-full arcm-flex arcm-items-center arcm-justify-center'>
                  {arcmIcons.SpinningAnimation}
                </span>
              </td>
            </tr>
          ) : orders.length > 0 ? (
            orders.map((order, index) => {
              // Parse the order_data string to get the status
              const orderData = JSON.parse(order.order_data)
              //console.log('Archived Order Data', orderData.billing)
              return (
                <tr
                  key={order.id}
                  className='odd:arcm-bg-white even:arcm-bg-transparent'
                >
                  <td
                    className={`arcm-w-12 arcm-px-6 arcm-py-5 ${
                      index === orders.length - 1
                        ? 'arcm-rounded-bl-lg'
                        : ''
                    }`}
                  >
                    <input
                      type='checkbox'
                      checked={order.is_selected}
                      onChange={() => handleSelectOrder(order.id)}
                      className='arcm-rounded arcm-border-gray-400 !arcm-bg-transparent'
                    />
                  </td>
                  <td className='arcm-border-0 arcm-px-6 arcm-py-4 arcm-text-left arcm-text-sm arcm-text-gray-900'>
                    #{orderData.id}
                  </td>
                  <td className='arcm-border-0 arcm-px-6 arcm-py-4 arcm-text-sm arcm-text-gray-900'>
                    {new Date(
                      orderData.date_created.date
                    ).toLocaleDateString()}
                  </td>
                  <td className='arcm-border-0 arcm-px-6 arcm-py-4 arcm-text-sm arcm-text-gray-900'>
                    <p>
                      {orderData.billing.first_name}{' '}
                      {orderData.billing.last_name}
                    </p>
                    <p>{orderData.billing.email}</p>
                  </td>
                  <td className='arcm-border-0 arcm-px-6 arcm-py-4 arcm-text-sm arcm-text-gray-900'>
                    {orderData.status.charAt(0).toUpperCase() +
                      orderData.status.slice(1)}
                  </td>
                  <td
                    className={`arcm-border-0 arcm-px-6 arcm-py-4 arcm-text-sm arcm-text-right ${
                      index === orders.length - 1
                        ? 'arcm-rounded-br-lg'
                        : ''
                    }`}
                  >
                    <button
                      onClick={() => singleOrderUnarchive(order.id)}
                      disabled={
                        singleOrderId === parseInt(order.id) &&
                        singleDuplicateCheckLoading
                      }
                      className='arcm-px-4 arcm-py-2 arcm-rounded-full arcm-border arcm-border-blue-600 arcm-text-blue-600 arcm-text-sm arcm-font-semibold arcm-transition-all hover:arcm-bg-blue-600 hover:arcm-text-white disabled:arcm-opacity-50 disabled:arcm-cursor-not-allowed'
                    >
                      {singleOrderId === parseInt(order.id) &&
                      singleDuplicateCheckLoading
                        ? arcmIcons.spinning
                        : t('unarchive')}
                    </button>
                  </td>
                </tr>
              )
            })
          ) : (
            <tr>
              <td colSpan={6} className='arcm-h-[240px]'>
                <span className='arcm-table-loader arcm-text-sm arcm-font-bold arcm-w-full arcm-h-full arcm-flex arcm-items-center arcm-justify-center'>
                  {isSyncEmptyResult ? 'No order found in the Google Drive.' : t('no_archived_data')}
                </span>
              </td>
            </tr>
          )}
        </tbody>
      </table>
      {/* Enhanced Pagination Component */}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={handlePageChange}
        showQuickJump={true}
        showResultsInfo={true}
        totalItems={totaOrderNumber}
        itemsPerPage={ordersPerPage}
        startIndex={startIndex}
        className='arcm-mt-8'
      />
    </div>
  )
}

export default ArchivedOrdersTable