import React, {useContext,} from "react";
import AuthContext from "../../context/auth-context";
import NewsArticle from "../UI/NewsArticle/NewsArticle";
import DuaAppsBanner from "../../assets/images/DuaAppsBanner.svg";
import "./application-box.scss"
import ApplicationBox from "./ApplicatioBox";

interface ApplicationsProps {
}

const newsArticle = {
    image: DuaAppsBanner,
    title: "All in one go",
    subtitle: "D.U.A. Εφαρμογές",
    content: "Οι εφαρμογές D.U.A. είναι σχεδιασμένες για να κάνουν την " +
        "καθημερινότητα όλων μας ευκολότερη. Οι διαδικασίες τώρα απλοποιούνται" +
        " και με το πάτημα ενός κουμπιού έχετε στη διάθεσή σας στοιχεία και" +
        " στατιστικά ευκολότερα από ποτέ!",
}


const Applications: React.FC<ApplicationsProps> = () => {
    const {currentUser} = useContext(AuthContext);
    const uniqueMicroservices = (Object.keys(currentUser!.microservice_permissions));
    return (
        <div id={'allApplications'}>
            <section className="row gy-3 news-container application">
                <NewsArticle
                    theme={`application`}
                    image={newsArticle.image}
                    title={newsArticle.title}
                    subtitle={newsArticle.subtitle}
                    content={newsArticle.content}
                />
            </section>
            <section className="row gy-4 apps-wrapper">
                {
                    uniqueMicroservices
                        .filter(ms => ms !== 'settings')
                        .map((ms) => {
                        return (
                            <div key={ms} className='col-clg-6 col-cxxl-4'>
                                <div key={`${ms}`}>
                                    <ApplicationBox
                                    ms={`${ms}`}/>
                                </div>
                            </div>
                        )
                    })
                }
            </section>
        </div>
    );
};

export default Applications;