import getDateTimeFromDateString from "../../helpers/getDateTimeFromDateString";
import RouteLinks from "../../RouteLinks";
import Icons from "../Icons";
import {Link} from 'react-router-dom'

export default function CustomerSubscriptionsView({subscriptions}) {
    return <>
        <div className="pb-5">
            <div className="flex flex-col gap-1">
                <div className="w-full">
                    <h4 className="font-semibold text-lg">Subscriptions</h4>
                </div>
                <div className="w-full overflow-x-auto">
                    <>
                        <table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
                            <thead className="py-2 text-sm text-slate-500 text-left">
                            <tr>
                                <th scope="col" className="px-2 py-2">
                                    #
                                </th>
                                <th scope="col" className="px-2">
                                    Added
                                </th>
                                <th scope="col" className="px-2">
                                    Product
                                </th>
                                <th scope="col" className="px-2">
                                    URL / Templates
                                </th>
                                <th scope="col" className="px-2">
                                    Status
                                </th>
                                <th scope="col" className="px-2 text-right">
                                    Action
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            {(subscriptions && subscriptions.length > 0) ? subscriptions?.map((item, index) => (
                                    <tr key={index} className="py-2 border-t border-dashed border-slate-300">
                                        <td className="px-2 py-2">
                                            <div className="text-left">
                                                <div className="text-base font-semibold">{index+1}</div>
                                            </div>
                                        </td>
                                        <td className="px-2">
                                            <div className="text-left">
                                                <div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
                                            </div>
                                        </td>
                                        <td className="px-2">
                                            <div className="text-left">
                                                <div className="text-base font-semibold">{item?.product_id}</div>
                                            </div>
                                        </td>
                                        <td className="px-2">
                                            <div className="text-left">
                                                <div className="text-base font-semibold">{item?.internal_url}
                                                <br /><span>Template :</span> {item?.product_template}
                                                <br /><span>Custom :</span> {item?.custom_template}
                                                </div>
                                            </div>
                                        </td>
                                        <td className="px-2">
                                            <div className="text-right">
                                                <div className="text-base font-semibold">{item?.status}</div>
                                            </div>
                                        </td>
                                        <td className="px-2 text-right">
                                            <div className='flex items-center justify-end gap-3 md:gap-4'>
                                                <div
                                                    className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
                                                    <Link to={`/subscription-view/${item?.subscription_uid}`} state={{customerID: item?.id, subscriptionUID: item?.subscription_uid}}>
                                                        <Icons name='eye'/>
                                                    </Link>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                ))
                                :
                                <tr className="py-2 border-t border-dashed border-slate-300">
                                    <td className="px-3 py-2" colSpan={6}>
                                        <div className="flex justify-center items-center">
                                            No Record Found
                                        </div>
                                    </td>
                                </tr>
                            }
                            </tbody>
                        </table>
                    </>
                </div>
            </div>
        </div>
    </>
}