import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "../FreeDatas2HTML";

const initialise = () =>
{
    try
    {
        const  dataDisplayElt=document.getElementById("datas");
        const  dataDisplayOptionsElt=document.getElementById("displayOptions");
        const myFile=document.getElementById("myFile") as HTMLInputElement;
        const myForm=document.getElementById("userSettings") as HTMLElement;
        const pagesElt=document.getElementById("pages") as HTMLElement;
        const paginationElt=document.getElementById("paginationOptions") as HTMLElement;
        const searchElt=document.getElementById("search") as HTMLElement;

        if(dataDisplayElt === null || dataDisplayOptionsElt === null || myFile === null || myForm === null|| pagesElt === null|| paginationElt === null|| searchElt === null)
            throw new Error("Tous les éléments HTML nécessaires au fonctionnement n'ont pas été trouvés dans la page;");

        const reInitialise= () =>
        {
            dataDisplayElt.innerHTML="";
            dataDisplayOptionsElt.innerHTML="";
            pagesElt.innerHTML="";
            paginationElt.innerHTML="";
            searchElt.innerHTML="";
        }

        let converter : FreeDatas2HTML;
        const myRender=new Render();
        // Attention, l'élément affichant le compteur n'est pas initialement présent dans la page :
        myRender.settings.allBegining="<table class='table-hover'><caption>Nombre de résultats : <span  id='counter'></span></caption>";

        myFile.addEventListener("change", function(e)
       {
            reInitialise();
            converter=new FreeDatas2HTML("CSV");
            converter.datasRender=myRender;
   
            const selectedFiles=myFile.files;
            if(selectedFiles !== null && selectedFiles.length === 1)
            {
                if(selectedFiles[0].type !== "text/csv")
                    dataDisplayOptionsElt.innerHTML=`<p class='text-danger'>Le document que vous avez sélectionné ne semble pas être un fichier CSV valide.</p>`;
                else
                {
                    const reader=new FileReader();
                    reader.onload=async function(e)
                    {
                        converter.parser.datas2Parse=reader.result as string;
                        await converter.run();
                        let fieldsSelectorHTML=`<fieldset class="form-group"><legend>Quels champs souhaitez-vous afficher ?</legend>`;
                        for(let i=0; i < converter.fields.length; i++)
                             fieldsSelectorHTML+=`<label for="selectedField_${i}" class="paper-check"> <input type="checkbox" class="selectedFields" id="selectedField_${i}" name="selectedField_${i}" value=${i} checked> <span>${converter.fields[i]}</span></label>`;
                        fieldsSelectorHTML+=`</fieldset>`;
                        dataDisplayOptionsElt.innerHTML=fieldsSelectorHTML+`<button type="submit" class="btn-success">Valider</button>`;
                    };
                    reader.readAsText(selectedFiles[0]);
                }
            }
        });

        myForm.addEventListener("submit", function(e)
       {
            e.preventDefault();
            dataDisplayElt.innerHTML="";
            let fields2Rend: number[]=[];
            let checkBox: HTMLInputElement;
            for(let i=0; i < converter.fields.length; i++)
            {
                checkBox=document.getElementById("selectedField_"+i) as HTMLInputElement;
                if(checkBox !== null)
                {
                    if(checkBox.checked)
                        fields2Rend.push(i);
                }
            }

            if( fields2Rend.length === 0)
                dataDisplayElt.innerHTML=`<p class='text-danger'>Vous n'avez sélectionné aucun champ à afficher !</p>`;
            else
            {
                converter.fields2Rend=fields2Rend;
                converter.datasViewElt={  id:"datas" };

                // + Un moteur de recherche :
                const mySearch=new SearchEngine(converter, { id:"search" });
                mySearch.label="Qui cherche trouve ?";
                mySearch.btnTxt="Va chercher !";
                mySearch.automaticSearch=true;
                mySearch.nbCharsForSearch=2;
                mySearch.placeholder="Saisir un moins 2 caractères";
                mySearch.filter2HTML();
                converter.datasFilters=[mySearch];

                // + Pagination :
                const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
                pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,500] , name: "Choix de pagination :" };
                pagination.selectedValue=10;
                converter.pagination=pagination;
                pagination.options2HTML();

                // + Compteur :
                converter.datasCounterElt={ id:"counter" };

                // +Toutes les colonnes affichées sont classables :
                let sortingField: SortingField;
                converter.datasSortingFields=[];
                for(let i=0; i < converter.fields2Rend.length; i++)
                {
                    sortingField=new SortingField(converter, converter.fields2Rend[i]);
                    converter.datasSortingFields.push(sortingField);
                }
                
                // Actualisation de l'affichage
                converter.refreshView();
            }
            
       });
       
    }
    catch(e)
    {
        console.error(e);
        document.getElementById("datas")!.innerHTML=`<strong>Désolé, mais un problème imprévu empêche l'affichage des données.</strong>`;
    }
}
initialise();