/* Copy of EditQuiz.js */
import React, { useEffect, useState } from "react";
import "./EditQuiz.css";
import {
	Container,
	Typography,
	Button,
	Dialog,
	Grid,
	InputLabel,
	Select,
	MenuItem,
	ExpansionPanel,
	ExpansionPanelSummary,
	ExpansionPanelDetails,
	List,
	ListItem,
	ListItemText,
	ListItemIcon,
	FormControlLabel,
	IconButton,
	DialogTitle,
	Snackbar,
} from "@material-ui/core";
import { Create, ExpandMore, Adjust, Delete } from "@material-ui/icons";
import { Link, Redirect } from "react-router-dom";
import axios from "axios";
import Loading from "./Loading";
import TextInput from "../components/TextInput";
import { Alert } from "@material-ui/lab";

function OwnerQuizDetails(props) {
	const quizId = props.match.params.id;

	const [loading, setLoading] = useState(true);
	const [redirect, setRedirect] = useState(false);
	const [redirectD, setRedirectD] = useState(false);

	const [quizDetails, setQuizDetails] = useState({});
	const [quizQuestions, setQuizQuestions] = useState([]);
	const [responses, setResponses] = useState([]);

	const [deleteModal, setDeleteModal] = useState(false);
	const [deleteSnack, setDeleteSnack] = useState(false);

	const handleDeleteBtn = () => {
		setDeleteModal(true);
	};

	const validate = async () => {
		let token = localStorage.getItem("authToken");
		let url = "https://quizzie-api.herokuapp.com/general/checkUser";

		try {
			await axios
				.get(url, {
					headers: {
						"auth-token": token,
					},
				})
				.then((res) => {
					if (res.data.result.userType !== "Owner") {
						setRedirectD(true);
						return;
					}
				});
		} catch (error) {
			console.log(error);
		}
	};

	const handleDelete = async () => {
		setDeleteSnack(true);
		let token = localStorage.getItem("authToken");
		let url = `https://quizzie-api.herokuapp.com/owner/quiz/${quizId}`;

		try {
			await axios
				.delete(url, {
					headers: {
						"auth-token": token,
					},
				})
				.then((res) => {
					setRedirect(true);
				});
		} catch (error) {
			console.log(error);
		}
	};

	const getQuizDetails = async () => {
		setLoading(true);
		let token = localStorage.getItem("authToken");
		let url = `https://quizzie-api.herokuapp.com/quiz/${quizId}`;

		try {
			await axios
				.get(url, {
					headers: {
						"auth-token": token,
					},
				})
				.then((res) => {
					setQuizDetails(res.data.result);
				});
		} catch (error) {
			console.log(error);
		}

		url = `https://quizzie-api.herokuapp.com/question/all/${quizId}`;

		try {
			await axios
				.get(url, {
					headers: {
						"auth-token": token,
					},
				})
				.then((res) => {
					setQuizQuestions(res.data.result);
					setLoading(false);
				});
		} catch (error) {
			console.log(error);
		}

		// url = `https://quizzie-api.herokuapp.com/admin/allStudentsQuizResult/${quizId}`;

		// try {
		// 	await axios.get(url, {
		// 		headers: {
		// 			"auth-token": token
		// 		}
		// 	}).then(res => {
		// 		console.log(res);
		// 		setResponses(res.data.userResults);
		// 		setLoading(false);
		// 	})
		// } catch(error) {
		// 	console.log(error);
		// }
	};

	useEffect(() => {
		let token = localStorage.getItem("authToken");
		if (token === null) {
			setLoading(false);
			setRedirect(true);
			return;
		}
		validate();
		getQuizDetails();
	}, []);

	if (loading) {
		return <Loading />;
	} else if (redirect) {
		return <Redirect to="/coronilOP" />;
	} else if (redirectD) {
		return <Redirect to="/dashboard" />;
	} else {
		return (
			<Container className="edit-quiz-page">
				<Typography
					variant="h3"
					className="dash-head p-top edit-quiz-head"
				>
					Quiz Details
				</Typography>
				<div className="edit-btn-bar">
					<Button
						className="edit-details-btn delete-btn"
						onClick={handleDeleteBtn}
					>
						<Delete className="edit-icon" />
						Delete Quiz
					</Button>
				</div>
				<div className="quiz-details-sec">
					<Typography variant="h6" className="quiz-detail-param">
						Name:{" "}
						<span className="quiz-detail-text">
							{quizDetails.quizName}
						</span>
					</Typography>
					<Typography variant="h6" className="quiz-detail-param">
						Date:{" "}
						<span className="quiz-detail-text">
							{new Date(
								Number(quizDetails.scheduledFor)
							).toDateString()}
						</span>
					</Typography>
					<Typography variant="h6" className="quiz-detail-param">
						Time:{" "}
						<span className="quiz-detail-text">
							{new Date(
								Number(quizDetails.scheduledFor)
							).toLocaleTimeString()}
						</span>
					</Typography>
					<Typography variant="h6" className="quiz-detail-param">
						Duration:{" "}
						<span className="quiz-detail-text">
							{quizDetails.quizDuration} minutes
						</span>
					</Typography>
					<Typography variant="h6" className="quiz-detail-param">
						Type:{" "}
						<span className="quiz-detail-text">
							{quizDetails.quizType}
						</span>
					</Typography>
					{quizDetails.quizType === "private" ? (
						<Typography variant="h6" className="quiz-detail-param">
							Quiz Code:{" "}
							<span className="quiz-detail-text">
								{quizDetails.quizCode}
							</span>
						</Typography>
					) : null}
				</div>
				<div className="quiz-questions-sec">
					<Typography variant="h4" className="quiz-questions-head">
						Questions
					</Typography>
					<div className="quiz-questions-display">
						{quizQuestions.length === 0 ? (
							<p style={{ textAlign: "center" }}>
								No questions added yet!
							</p>
						) : (
							<div className="questions-list-display">
								{quizQuestions.map((question) => (
									<ExpansionPanel
										elevation={3}
										className="expansion"
										key={question._id}
									>
										<ExpansionPanelSummary
											className="question-summary"
											expandIcon={<ExpandMore />}
											aria-controls="question-content"
											aria-label="Expand"
										>
											<Typography className="question-label">
												{question.description}
											</Typography>
										</ExpansionPanelSummary>
										<ExpansionPanelDetails>
											<List
												component="nav"
												className="options-display"
											>
												{question.options.map(
													(option) => (
														<ListItem
															button
															key={option._id}
														>
															<ListItemIcon>
																<Adjust
																	style={{
																		color:
																			question.correctAnswer ===
																			option.text
																				? "green"
																				: "black",
																	}}
																/>
															</ListItemIcon>
															<ListItemText
																style={{
																	color:
																		question.correctAnswer ===
																		option.text
																			? "green"
																			: "black",
																}}
																primary={
																	option.text
																}
															/>
														</ListItem>
													)
												)}
											</List>
										</ExpansionPanelDetails>
									</ExpansionPanel>
								))}
							</div>
						)}
					</div>
					{/* <Typography variant="h4" className="quiz-questions-head m-top">Submissions</Typography>
					<div className="quiz-students-list">
						{responses.length === 0? <p style={{ textAlign: 'center' }}>No responses yet!</p>
						: 
						<List aria-label="responses list">
							{responses.map((response) => (
								<ListItem button key={response._id}>
									<ListItemText primary={response.userId.name} secondary={`Scored: ${response.marks}`} />
								</ListItem>
							))}
						</List>
						}
					</div> */}
				</div>
				<Dialog
					open={deleteModal}
					onClose={() => setDeleteModal(false)}
					aria-labelledby="delete-quiz-modal"
					PaperProps={{
						style: {
							backgroundColor: "white",
							color: "black",
							minWidth: "10%",
						},
					}}
				>
					<DialogTitle>
						Are you sure you want to delete this quiz?
					</DialogTitle>
					<div className="btn-div">
						<Button
							className="logout-btn m-right bg-red-btn"
							onClick={handleDelete}
						>
							Yes
						</Button>
						<Button
							className="cancel-btn m-left"
							onClick={() => setDeleteModal(false)}
						>
							No
						</Button>
					</div>
				</Dialog>
				<Snackbar
					open={deleteSnack}
					autoHideDuration={5000}
					onClose={() => setDeleteSnack(false)}
				>
					<Alert
						variant="filled"
						severity="info"
						onClose={() => setDeleteSnack(false)}
					>
						Processing... Please Wait!
					</Alert>
				</Snackbar>
			</Container>
		);
	}
}

export default OwnerQuizDetails;