import React from "react";
import { isMobile } from "../../modules/toolbox/devices";
const URL_FAQ = "https://medgo.crisp.help/fr/",
    URL_IMAGES = "https://medgostatic.s3.eu-west-3.amazonaws.com/";
import "../../scss/components/FooterComponent.scss";
const moment = require("moment");

function FooterLanding({
    telText,
    emailText,
    urlBase
}: {
    telText: string;
    emailText: string;
    urlBase?: string;
}): JSX.Element {
    let num = <span>{telText}</span>;
    let mail = <span>{emailText}</span>;

    /* fix for android standard browser which sometimes wrongly detects phone numbers somewhere */
    if (isMobile()) {
        num = (
            <a href={"tel:" + telText}>
                <span>{telText}</span>
            </a>
        );
        mail = (
            <a href={"mailto:" + emailText}>
                <span>{emailText}</span>
            </a>
        );
    }

    const leftElements: JSX.Element[] = [
        <a key="clients" href={(urlBase ? urlBase : "") + "/clients"}>
            Clients/Partenaires
        </a>,
        <a key="solutions" href={(urlBase ? urlBase : "") + "/solutions"}>
            Solution
        </a>,
        <a key="about" href={(urlBase ? urlBase : "") + "/about"}>
            À propos
        </a>,
        <a key="contact" href={(urlBase ? urlBase : "") + "/contact"}>
            Contact
        </a>,
        <a key="blog" href="https://www.blog.medgo.fr/">
            Blog
        </a>,
        <a key="resources" href={(urlBase ? urlBase : "") + "/resources"}>
            Livres Blancs
        </a>
    ];
    const contactElements: JSX.Element[] = [
        <div key="email">{mail}</div>,
        <div key="phone">{num}</div>,
        <a key="faq" href={URL_FAQ} target="_blank">
            FAQ
        </a>
    ];
    const weAreConnectedElements = [
        <a key="twitter" href="https://twitter.com/_medGo_" target="_blank">
            <i className="fa-3x fab fa-twitter-square" />
        </a>,
        <a key="facebook" href="https://www.facebook.com/wearemedgo" target="_blank">
            <i className="fa-3x fab fa-facebook-square" />
        </a>,
        <a key="linkedin" href="https://www.linkedin.com/company/medgo-rempla" target="_blank">
            <i className="fa-3x fab fa-linkedin" />
        </a>
    ];
    return (
        <div className="main-footer is-landing">
            <div className="background-black">
                <div className="container">
                    <div className="row padding-top-m">
                        <div className="col-4 text-center">
                            <img className="img-fluid" src={URL_IMAGES + "medgo1.svg"} alt="Trust" />
                        </div>
                        <div className="col-4 col-md-3 col-md-offset-1 hidden-xs">
                            <Liste title="PAGES" elements={leftElements} />
                        </div>
                        <div className="col-4 col-md-3 col-md-offset-1 col-8">
                            <Liste title="CONTACT" elements={contactElements} />
                            <Liste
                                title="NOUS SOMMES CONNECTÉS"
                                style={{ display: "inline", marginTop: 15, marginRight: 15, color: "#F6593B" }}
                                elements={weAreConnectedElements}
                            />
                        </div>
                        <div className="clearfix" />
                        <div className="primary_section text-center">
                            <ul className="list-inline list-unstyled">
                                <li className="list-inline-item margin-top-m-fixe text-9">
                                    © {moment().format("YYYY")}. Tous droits réservés.
                                </li>
                                <li className="list-inline-item margin-top-m-fixe text-9">
                                    <a href={(urlBase ? urlBase : "") + "/terms"}>Conditions générales d'utilisation</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

function Link({ text, style }: { text: JSX.Element; style?: React.CSSProperties }): JSX.Element {
    return (
        <div style={style} className={`text-15 text-open-sans white-text text-bold margin-top-s`}>
            {text}
        </div>
    );
}

function Liste({
    title,
    elements,
    style
}: {
    title: string;
    elements: JSX.Element[];
    style?: React.CSSProperties;
}): JSX.Element {
    return (
        <div>
            <div className="text-15 text-open-sans orange-text text-bold margin-top-s">{title}</div>
            {elements.map((e, i) => {
                return <Link key={i} text={e} style={style} />;
            })}
        </div>
    );
}

export default FooterLanding;