import React, { useState, useEffect } from "react";
import { getParameterByName, msToTime } from "@common-utils/Utils";
import DataService from "@common-services/DataService";

export default function Dashboard() {
    const clientId = getParameterByName("clientId");
    const accessToken = getParameterByName("accessToken");

    const [sessioData, setSessionData] = useState();

    useEffect(() => {
        fetchSessionData();
    }, []);

    const fetchSessionData = async () => {
        try {
            let res = await DataService.get("/api/v1/auth/session-data", { accessToken });
            setSessionData(res.data);
        } catch (error) {
            console.error(error);
        }
    };

    return (
        <>
            <header>
                {/* <!-- Fixed navbar --> */}
                <nav className="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
                    <a className="navbar-brand" href="#"></a>
                    <button
                        className="navbar-toggler"
                        type="button"
                        data-toggle="collapse"
                        data-target="#navbarCollapse"
                        aria-controls="navbarCollapse"
                        aria-expanded="false"
                        aria-label="Toggle navigation"
                    >
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarCollapse">
                        <ul className="navbar-nav mr-auto">
                            <li className="nav-item active">
                                <a className="nav-link" href="#">
                                    Home <span className="sr-only">(current)</span>
                                </a>
                            </li>
                            {/* <li className="nav-item">
                                <a className="nav-link" href="#">
                                    Link
                                </a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link disabled" href="#">
                                    Disabled
                                </a>
                            </li> */}
                        </ul>
                        <div className="form-inline mt-2 mt-md-0">
                            <a href={`/sso/auth/logout${clientId ? "?clientId=" + clientId : ""}`} className="nav-link">
                                Logout
                            </a>
                        </div>
                    </div>
                </nav>
            </header>

            {/* <!-- Begin page content --> */}
            <main role="main">
                <div className="container">
                    <h3 className="mt-5">
                        Welcome <span>( {sessioData?.accessToken} )</span>,
                    </h3>
                    <p className="lead">
                        Created :: <code>{sessioData ? `${new Date(sessioData.createTime.stamp)}` : ""}</code>
                    </p>
                    <p className="lead">
                        TTL :: <code>{sessioData ? msToTime(sessioData.ttl) : ""}</code>
                    </p>
                    <p className="lead">
                        Tickets Associated :: <code>{sessioData?.tickets.length}</code>
                    </p>
                    <p className="lead">Modes ::</p>
                    {Object.values(sessioData?.uniqueSteps || {}).map((modeDetails, i) => (
                        <ul key={i} style={{ border: "0.5px solid", padding: "20px", marginBottom: "30px" }}>
                            <p className="lead">Name : {modeDetails.mode}</p>
                            <p className="lead">Status : {modeDetails.status}</p>
                            <div>
                                <p className="lead">
                                    Data :{" "}
                                    <a
                                        href="#"
                                        onClick={e => {
                                            e.preventDefault();
                                            setSessionData(prev => {
                                                let _prev = { ...prev };
                                                _prev.uniqueSteps[modeDetails.mode].showData = modeDetails.showData
                                                    ? false
                                                    : true;
                                                return _prev;
                                            });
                                        }}
                                    >
                                        {modeDetails.showData ? "hide" : "view"}
                                    </a>
                                </p>
                                {modeDetails.showData && (
                                    <code>
                                        <pre>{JSON.stringify(modeDetails.data, null, 2)}</pre>
                                    </code>
                                )}
                            </div>
                        </ul>
                    ))}
                </div>
            </main>
        </>
    );
}