import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { FolderType } from '../../../Types/FolderType';
import './share.css';
import { Button, NativeSelect } from '@mui/material';
import ReturnButton from 'src/components/ReturnButton/ReturnButton';
import ApiService from '../../../services/ApiService';

const Share: React.FC = () => {
    const navigate = useNavigate();
    const { id } = useParams<string>();

    const [quizTitle, setQuizTitle] = useState('');
    const [selectedFolder, setSelectedFolder] = useState<string>('');

    const [folders, setFolders] = useState<FolderType[]>([]);

    useEffect(() => {
        const fetchData = async () => {
            if (!id) {
                window.alert(`Une erreur est survenue.\n Le quiz n'a pas été trouvé\nVeuillez réessayer plus tard`)
                console.error('Quiz not found for id:', id);
                navigate('/teacher/dashboard');
                return;
            }

            if (!ApiService.isLoggedIn()) {
                window.alert(`Vous n'êtes pas connecté.\nVeuillez vous connecter et revenir à ce lien`);
                navigate("/login");
                return;
            }
            
            const quizIds = await ApiService.getAllQuizIds();
            
            if (quizIds.includes(id)) {
                window.alert(`Le quiz que vous essayez d'importer existe déjà sur votre compte.`)
                navigate('/teacher/dashboard');
                return;
            }

            const userFolders = await ApiService.getUserFolders();
            
            if (userFolders.length == 0) {
                window.alert(`Vous n'avez aucun dossier.\nVeuillez en créer un et revenir à ce lien`)
                navigate('/teacher/dashboard');
                return;
            }

            setFolders(userFolders as FolderType[]);

            const title = await ApiService.getSharedQuiz(id);

            if (!title) {
                window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
                console.error('Quiz not found for id:', id);
                navigate('/teacher/dashboard');
                return;
            }

            setQuizTitle(title);
        };

        fetchData();
    }, []);

    const handleSelectFolder = (event: React.ChangeEvent<HTMLSelectElement>) => {
        setSelectedFolder(event.target.value);
    };

    const handleQuizSave = async () => {
        try {

            if (selectedFolder == '') {
                alert("Veuillez choisir un dossier");
                return;
            }
            
            if (!id) {
                window.alert(`Une erreur est survenue.\n Le quiz n'a pas été trouvé\nVeuillez réessayer plus tard`)
                console.error('Quiz not found for id:', id);
                navigate('/teacher/dashboard');
                return;
            }

            await ApiService.receiveSharedQuiz(id, selectedFolder)
            navigate('/teacher/dashboard');

        } catch (error) {
            window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
            console.log(error)
        }
    };

    return (
<div className='quizImport'>
    <div className='importHeader'>
        <ReturnButton />
        <div className='titleContainer'>
            <div className='mainTitle'>Importation du Quiz: {quizTitle}</div>
            <div className='subTitle'>
                Vous êtes sur le point d'importer le quiz <strong>{quizTitle}</strong>, choisissez un dossier dans lequel enregistrer ce nouveau quiz.
            </div>
        </div>
        <div className='dumb'></div>
    </div>

    <div className='editSection'>
        <div className='formContainer'>
            <NativeSelect
                id="select-folder"
                color="primary"
                value={selectedFolder}
                onChange={handleSelectFolder}
                className="folderSelect"
            >
                <option disabled value=""> Choisir un dossier... </option>
                {folders.map((folder: FolderType) => (
                    <option value={folder._id} key={folder._id}> {folder.title} </option>
                ))}
            </NativeSelect>

            <Button variant="contained" onClick={handleQuizSave} className="saveButton">
                Enregistrer
            </Button>
        </div>
    </div>
</div>
    );
};

export default Share;
