import Segment from '../../shared/segment';
import { BLANK_TEXT } from '../../utils';
import { SettleRequestType } from '../../../api/settle-request';

export type SettleRequestsPropsType = { settleRequests: SettleRequestType[] };

function SettleRequests({ settleRequests }: SettleRequestsPropsType) {
  return (
    <div data-testid='settle-requests' className='mx-auto w-full sm:w-4/5 md:w-3/4 lg:w-2/3'>
      {settleRequests.length === 0 ? (
        <Segment dataTestId='empty-settle-requests' textAlign='center' className='text-lg'>
          سابقه درخواست تسویه برای شما یافت نشد.
        </Segment>
      ) : (
        <table
          data-testid='settle-requests-table'
          className='my-8 mx-1 w-full table-auto border text-center text-sm text-slate-500'
        >
          <thead className='bg-slate-200 text-xs text-slate-700'>
            <tr>
              <th scope='col' className='px-3 py-3 sm:px-6'>
                شناسه
              </th>
              <th scope='col' className='px-3 py-3 sm:px-6'>
                وضعیت
              </th>
              <th scope='col' className='px-3 py-3 sm:px-6'>
                تاریخ درخواست
              </th>
              <th scope='col' className='px-3 py-3 sm:px-6'>
                مبلغ
              </th>
              <th scope='col' className='px-3 py-3 sm:px-6'>
                تاریخ پرداخت
              </th>
            </tr>
          </thead>
          <tbody>
            {settleRequests.map(settleRequest => (
              <tr key={settleRequest.id} className='border-b odd:bg-white even:bg-slate-100'>
                <td scope='row' className='px-3 py-4 sm:px-6'>
                  {settleRequest.id}
                </td>
                <td className='px-3 py-4 sm:px-6'>
                  {settleRequest.status ? 'پرداخت شده' : 'درحال بررسی'}
                </td>
                <td className='px-3 py-4 sm:px-6'>
                  {new Date(settleRequest.created).toLocaleDateString('fa')}
                </td>
                <td className='px-3 py-4 sm:px-6'>
                  {settleRequest.transaction
                    ? `${settleRequest.transaction?.amount.toLocaleString()} ریال`
                    : BLANK_TEXT}
                </td>
                <td className='px-3 py-4 sm:px-6'>
                  {settleRequest.transaction
                    ? new Date(settleRequest.transaction?.date).toLocaleDateString('fa')
                    : BLANK_TEXT}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default SettleRequests;
