import React, {useEffect} from "react";
import {AuthService} from './../../services';
import { useNavigate } from "react-router-dom";

const Landing = () => {
  const navigate = useNavigate();
  const goToAdmin = () => {
    navigate('/dashboard/dashboard');
  }

  const getLogoSuffix = () => {
    return (window.location.hostname.includes('worldshine2.mayo.llc') || window.location.hostname.includes('site2') || window.location.host.includes('ws2') ||window.location.hostname.includes('localhost')) ? "Care LLC" : ((window.location.hostname.includes('worldshine3.mayo.llc') ||window.location.hostname.includes('site3') || window.location.hostname.includes('ws3')) ? "Cloverleaf LLC" : "International LLC");
  }

  useEffect(() => {
    if (!AuthService.canAccessLegacySystem()) {
      window.alert('You haven\'t login yet OR this user does not have access to this page. Please change an admin account to login.')
      AuthService.logout();
      navigate(`/login`);
    }
  }, [])
  
  return (
    <div className="container container-fixed">
      <div className="landing">
        <div className="landing-content-title">
          <div className="logo-container mb-8"><img src="/images/logo-trans.png" /><strong className="logo-worldshine">Worldshine</strong><span className="logo-suffix">{getLogoSuffix()}</span></div>
          <h3 className="landing-title">Worldshine Group </h3>
          <h3 className="landing-title mb-4">Online Management System</h3>
          <div className="landing-content-container">
            <div className="landing-content mb-4">
              <button onClick={() => goToAdmin()} className="btn btn-primary">Center Management Access</button>
            </div>
            {/* <div className="landing-content">
              <button className="btn btn-primary">HR Management Access</button>
            </div> */}
          </div>
        </div>
        <div className="landing-img"/>
      </div>
    </div>
    
  );
};

export default Landing;