ocms home

import React, { useEffect } from 'react';
import {Link, useNavigate} from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import {
    clearOCMSErrorsAction,
    retrieveRoleNameAction
} from "../../../store/actions/ocms-jobActions"; // for OCMS user role-name
import classes from './home.module.css';
import ADA_logo from "../../../assets/images/ADA_logo.png";
import FooterLinks from "../../footer-links/footer-links";

const OCMS_Home = () => {

    // store data
    const { id } = useSelector(state => state.auth.userData);
    const ocmsRoles = useSelector(state => state.ocmsJobs.ocmsRoles) || [];
    const isAuthenticated = useSelector(state => state.auth.isAuthenticated);

    const navigate = useNavigate();
    const dispatch = useDispatch();
    const goBack = () => navigate(-1);

    // clear errors
    useEffect(() => {
        dispatch(clearOCMSErrorsAction());
    }, []);

    // retrieve OCMS user role-name
    useEffect(() => {
        dispatch(retrieveRoleNameAction(id));
    }, [id]);

    useEffect(() => {
        if(!isAuthenticated) {
            navigate(`/login`);
        }
    }, [isAuthenticated]);

    let ocmsRole;

    if(ocmsRoles.length > 1) {
        ocmsRole = (
            <>
                <li className="">
                    <Link to={`/ocms-checker-form`} className="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap">
                        <span className="text-gray-700">SRE</span>
                    </Link>
                </li>
                <li className="">
                    <Link to={`/ocms-maker-form`} className="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap">
                        <span className="text-gray-700">Application</span>
                    </Link>
                </li>
            </>
        );
    } else if(ocmsRoles.length == 1 && ocmsRoles.includes('SRE')) {
        ocmsRole = (
            <li className="">
                <Link to={`/ocms-checker-form`} className="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap">
                    <span className="text-gray-700">SRE</span>
                </Link>
            </li>
        );
    } else if(ocmsRoles.length == 1 && ocmsRoles.includes('Application')) {
        ocmsRole = (
            <li className="">
                <Link to={`/ocms-maker-form`} className="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap">
                    <span className="text-gray-700">Application</span>
                </Link>
            </li>
        );
    }

    const roleNamesDropdown = (
        <div className="p-3 mb-3 mr-2">
            <div className={`${classes.dropdown} inline-block relative`}>
                <button className="dbsMainButton font-semibold py-1 px-2 rounded inline-flex items-center">
                    <span className="mr-1">Your role is</span>
                    <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                    </svg>
                </button>
                <ul className={`${classes.dropdownMenu} absolute hidden text-gray-700 pt-1`}>
                    { ocmsRole }
                </ul>
            </div>
        </div>
    );

    return (

        <div className={`${classes.outerContainer}`}>
            <div className={`${classes.container} bg-blue-900 rounded`}>
                <div className={`${classes.wrapper} mb-10`}>
                    <div className={`${classes.callToAction}`}>
                        <h2 className={`text-gray-500 font-bold text-lg ml-3`}>Control & Monitoring Service</h2>
                        { roleNamesDropdown }
                    </div>
                    <div className={`${classes.logoContainer} `}>
                        <img src={ ADA_logo } alt={`ADA logo`} className={`${classes.logo} ml-4`} />
                    </div>
                </div>
                <FooterLinks />
            </div>
        </div>
    );
}

export default OCMS_Home;