import React from 'react'
import {Link} from 'react-router-dom'
import Img from '../../../assets/user_avatar.jpg'
import CustomCounter from '../../CustomCounter'

export default function Tickets({data, isFetching, isError, error}) {

  const recentDeployment = data?.data?.recent_deployment_summary
  const recentSignup = data?.data?.recent_signup


  return (
    <div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 aside-scroll-design'>
        <div className='flex flex-col gap-4'>
            <p className='text-base text-white-body font-bold'>Recent Deployments</p>
                {isFetching ?
                <div className='w-full flex justify-center'>
                    <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
                </div>
                :
                isError ?
                <p className='text-base text-white-body font-bold'>{error?.message}</p>
                :
                <div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
                        <p className='text-base font-bold text-white-body'>
                        <CustomCounter targetNumber={recentDeployment?.pending} timeInSeconds={1} />
                        </p>
                        <p className='text-sm text-slate-500'>Pending</p>
                    </div>
                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
                        <p className='text-base font-bold text-white-body'>
                        <CustomCounter targetNumber={recentDeployment?.started} timeInSeconds={1} />
                        </p>
                        <p className='text-sm text-slate-500'>Started</p>
                    </div>
                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
                        <p className='text-base font-bold text-white-body'>
                        <CustomCounter targetNumber={recentDeployment?.stuck} timeInSeconds={1} />
                        </p>
                        <p className='text-sm text-slate-500'>Stuck</p>
                    </div>
                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
                        <p className='text-base font-bold text-white-body'>
                        <CustomCounter targetNumber={recentDeployment?.completed} timeInSeconds={1} />
                        </p>
                        <p className='text-sm text-slate-500'>Completed</p>
                    </div>
                </div>
                }
        </div>
        <div className='overflow-y-auto h-full flex flex-col gap-4'>
            <p className='text-base text-white-body font-bold'>Recent Signup</p>
                {isFetching ?
                <div className='w-full flex justify-center'>
                    <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
                </div>
                :
                isError ?
                <p className='text-base text-white-body font-bold'>{error?.message}</p>
                :
                <div className='flex flex-col gap-4'>
                    {recentSignup.map((item, index)=> {
                        return (
                            <Link
                                to={`/account-view/${item?.member_uid}`}
                                state={{customerID: item?.id, memberUID: item?.member_uid}} 
                                key={index} 
                                className='flex gap-3 items-center'
                            >
                                <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
                                    <img src={Img} className='w-8' alt="Order" />
                                </div>
                                <div className='flex-col'>
                                    <p className='text-base font-bold text-white-body'>{item.firstname} {item.lastname}</p>
                                    <p className='text-sm text-slate-500'>{item.username}</p>
                                </div>
                            </Link>
                        )
                    }
                    )}
                </div>
                }
        </div>
    </div>
  )
}
