import SentTag from "./SentTag";
import FailedTag from "./FailedTag";
import PendingTag from "./PendingTag";
import ArrowDownOpen from './../../assets/images/ArrowDownOpen.svg'
import ArrowUpClose from './../../assets/images/ArrowUpClose.svg'

function timeSince(date) {

  var seconds = Math.floor((new Date() - date) / 1000);

  var interval = seconds / 31536000;

  if (interval > 1) {
    return Math.floor(interval) + " سال";
  }
  interval = seconds / 2592000;
  if (interval > 1) {
    return Math.floor(interval) + " ماه";
  }
  interval = seconds / 86400;
  if (interval > 1) {
    return Math.floor(interval) + " روز";
  }
  interval = seconds / 3600;
  if (interval > 1) {
    return Math.floor(interval) + " ساعت";
  }
  interval = seconds / 60;
  if (interval > 1) {
    return Math.floor(interval) + " دقیقه";
  }
  return Math.floor(seconds) + " ثانیه";
}

export default function OrdersTable({orders}) {
    function handleClick(id) {
        window.location.href = window.location.href + `/${id}`
    } 
    const _orders = orders <= 10 ? orders : orders.slice(0, 10)
    const orders_list = _orders.map(order => {
            return (
                <tr onClick={()=>handleClick(order.id)} key={order.id} className="border-y text-right font-normal">
                    <td className="py-4 pr-2 ">{order.id}</td>
                    <td className="py-4 pr-2 ">{timeSince(new Date(order.created_at))} پیش</td>
                    <td className="py-4 flex items-center">{order.total} تومان</td>
                    <td className="py-4">{order.customer.phone}</td>
                    <td className="py-4 truncate">{order.address.address}</td>
                    <td className="py-4 flex items-center justify-between pl-2">
                        {
                            order.status === 'shipped' ?
                                <p>ارسال شده</p>
                            : order.status === 'pre' ?
                               <p>پرداخت نشده</p>
                            : <p>پرداخت شده</p> 
                        }
                        
                    </td>
                </tr>
            )
        }
    );


    return (
        <div className="text-xs md:text-base w-full flex flex-col bg-1 font-[Vazirmatn] rounded-top-2xl">
            <table className="w-full text-right">
                <thead className={'text-white font-medium bg-dark w-full'}>
                    <tr>
                        <th className={'p-3'} style={{borderTopRightRadius: '15px'}}>کد</th>
                        <th>تاریخ</th>
                        <th>مبلغ</th>
                        <th>تلفن مشتری</th>
                        <th>آدرس</th>
                        <th style={{borderTopLeftRadius: '15px'}}>وضعیت</th>
                    </tr>
                </thead>
                {orders_list}
            </table>
        </div>
    );
}