import React, { useState, useEffect, useContext } from 'react';
import PageTitle from "../../Components/PageTitle";
import axios from 'axios';
import { ConfigContext } from '../../Context/ConfigContext';
import { ContentLoader, NoRecords } from "../../Components/Shimmer";
import { useNavigate, useParams } from 'react-router-dom';
import { DateFormater } from '../../Components/GlobalFunctions';

const RequestItems = () => {

    const { apiURL, apiHeaderJson } = useContext(ConfigContext);
    const { requirements_request_id } = useParams()
    const navigate = useNavigate()

    const [rows, setRows] = useState([])
    const [loadingList, setLoadingList] = useState(false);

    const GetInfo = async () => {
        try {
            setLoadingList(true)

            const headers = apiHeaderJson;
            const response = await axios.get(`${apiURL}api/requirements/requests/items?requirements_request_id=${requirements_request_id}`, { headers });

            if (response.data.success) {
                setRows(response.data.data)
            } else {
                setRows([])
            }
        } catch (error) {
            console.log(error);
        } finally {
            setLoadingList(false)
        }
    };

    const viewDoc = (file) => {
        const path = `https://tms.atctransline.in/apis/public/${file}`
        return path;
    }

    useEffect(() => {
        GetInfo()
    }, [requirements_request_id])

    return (
        <>
            <div className="main-content">
                <div className="page-content">

                    {!loadingList ? (
                        <div className="container-fluid">
                            <PageTitle title="View Uploaded Items" primary="Home" />

                            <div className="row">
                                <div className="col-md-12">
                                    <div className="card">
                                        <div className="card-header d-flex justify-content-between align-items-center" style={{ backgroundColor: "#000000" }}>
                                            <h4 className="card-title flex-grow-1 text-white mb-0">Documents List</h4>

                                            <button className='btn btn-light btn-sm' onClick={() => navigate(-1)}>
                                                <i className='ri-arrow-right-line align-middle'></i> Back
                                            </button>
                                        </div>

                                        <div className="card-body">
                                            <div className='table-responsive table-card'>
                                                <table className="table table-bordered table-striped table-hover table-nowrap mb-0">
                                                    <thead className="table-light">
                                                        <tr>
                                                            <th>ID</th>
                                                            <th>Value</th>
                                                            <th width={"10%"}>Upload Date</th>
                                                            <th className="text-center" width={"10%"}>Action</th>
                                                        </tr>
                                                    </thead>

                                                    {rows.length !== 0 ? (
                                                        <tbody>
                                                            {rows.map((row) => (
                                                                <tr key={row.requirements_request_item_id}>
                                                                    <td>{row.requirements_request_item_id}</td>
                                                                    <td>{row.requirements_request_item_value}</td>
                                                                    <td>{DateFormater(row.requirements_request_item_datetime)}</td>

                                                                    <td className="text-center">
                                                                        <a
                                                                            style={{ cursor: "pointer" }}
                                                                            className="btn btn-primary"
                                                                            target="_blank"
                                                                            href={viewDoc(row.requirements_request_item_file_path)}
                                                                        >
                                                                            <i className="ri-eye-fill me-2 align-middle" />
                                                                            View
                                                                        </a>
                                                                    </td>
                                                                </tr>
                                                            ))}
                                                        </tbody>
                                                    ) : (
                                                        <tbody>
                                                            <tr>
                                                                <td colSpan="10"><NoRecords /></td>
                                                            </tr>
                                                        </tbody>
                                                    )}

                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ) : (
                        <ContentLoader />
                    )}
                </div>
            </div>
        </>
    )
}

export default RequestItems