import React from 'react'
import { useQuery } from "@tanstack/react-query";
import { recentActions } from "../../services/services";
import queryKeys from "../../services/queryKeys";

export default function RecentActions() {

    const {data:dataAction, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.recentAction,
        queryFn: () => recentActions()
    })

    const actionData = dataAction?.data?.action_data

  return (
    <>
        <div className="card card-statistics h-100 mb-0">
            <div className="card-header">
                <div className="card-heading">
                    <h4 className="card-title">Recent Actions</h4>
                </div>
                {/* <div className="dropdown">
                    <input type="text" className="form-control form-control-sm" placeholder="Search Invoice"/>
                </div> */}
            </div>
            <div className="card-body scrollbar scroll_dark" style={{maxHeight: '450px'}}>
                {isFetching ? 
                <>
                    <div className="row">
                        <div className="col-12">
                            <p className='text-mute'>Loading...</p>
                        </div>
                    </div>
                </>
                : isError ?
                <div className="row">
                    <div className="col-12">
                        <p className='text-danger'>{error.message}</p>
                    </div>
                </div>
                :
                <>
                    <div className="d-xxs-flex align-items-center">
                        <div className="total-sales">
                            <p>Last Update</p>
                            <h3>{dataAction?.data?.action_data?.last_update}</h3>
                        </div>
                        <div className="mb-3 mb-sm-0 ml-auto">
                            {/*<button className="btn btn-primary btn-xs">View All Invoices</button>*/}
                        </div>
                    </div>
                    <div className="d-none d-sm-flex progress m-t-20 m-b-0" style={{height: '5px'}}>
                        <div className="progress-bar bg-primary" role="progressbar" style={{width: '25%'}}
                                aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                        <div className="progress-bar bg-warning" role="progressbar" style={{width: '25%'}}
                                aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                        <div className="progress-bar bg-info" role="progressbar" style={{width: '25%'}} aria-valuenow="20"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        <div className="progress-bar bg-success" role="progressbar" style={{width: '25%'}}
                                aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div className="row no-gutters">
                        <div className="col-6 col-xxs-3 ">
                            <p>Initial</p>
                            <h4>{actionData?.initial}</h4>
                        </div>
                        <div className="col-6 col-xxs-3 ">
                            <p>Processing</p>
                            <h4>{actionData?.processing}</h4>
                        </div>
                        <div className="col-6 col-xxs-3 ">
                            <p>Verifying</p>
                            <h4>{actionData?.verifying}</h4>
                        </div>
                        <div className="col-6 col-xxs-3 ">
                            <p>Completed</p>
                            <h4>{actionData?.completed}</h4>
                        </div>
                    </div>
                    <div className="table-responsive m-t-20">
                        <table id="datatable-buttons" className="table">
                            <thead>
                            <tr>
                                <th style={{width: '30px'}}>#.</th>
                                <th>Description</th>
                                <th style={{width: '100px'}}>Date</th>
                                <th style={{width: '100px'}}>Status</th>
                            </tr>
                            </thead>
                            <tbody className="text-muted">
                            {actionData && actionData?.actions.map((action, index) => {
                                let bgColor = action?.status == 'completed' ? 'badge-success-inverse' : action?.status == 'verifying' ? 'badge-info-inverse' : action?.status == 'processing' ? 'badge-warning-inverse' : 'badge-primary-inverse'
                                return (
                                    <tr key={index}>
                                        <td>{action?.no}</td>
                                        <td>{action?.description}</td>
                                        <td>{action?.date}</td>
                                        <td>
                                            <label className={`badge mb-0 ${bgColor}`}>{action?.status}</label>
                                        </td>
                                    </tr>
                                )
                            })}
                            </tbody>
                        </table>
                    </div>
                </>
                }
            </div>
        </div>
    </>
  )
}