/* eslint-disable jsx-a11y/aria-role */

import React, { useState } from "react";

function App() {
/**
* keep this following data as default data in agenda details as it is required
for testing
* [
{
title: "Angular",
description: "Some description about the angular",
topics: ["Introduction", "Typescript", "Why Angular?", "Understanding Versions",
"Fundamentals"]
},
{
title: "Vue",
description: "Some description about the vue",
topics: ["Introduction", "Javascript", "Why Vue?", "Vue Bindings", "Component
Interaction"]
},
],
*/
// your data goes here (state)
const [newTitle, setnewTitle] = useState("");
const [newDescription, setNewDescription] = useState("");
const [newTopic, setNewTopic] = useState("");
const [addedAgenda, setAddedAgenda] = useState([
{
title: "Angular",
description: "Some description about the angular",
topics: ["Introduction", "Typescript", "Why Angular?", "Understanding
Versions", "Fundamentals"]
},
{
title: "Vue",
description: "Some description about the vue",
topics: ["Introduction", "Javascript", "Why Vue?", "Vue Bindings", "Component
Interaction"]
},
]);
const [topicsArr, setTopicsArr] = useState([]);
const [showAgendaBlock, setShowAgendaBlock] = useState(false);
const changeFun = e => {
const { value, name } = e.target;
switch (name) {
case "newTitle":
setnewTitle(value);
break;
case "newDescription":
setNewDescription(value);
break;
case "newTopic":
setNewTopic(value);
break;
default:
break;
}
};
const topicFun = () => {
 if (newTopic.trim() !== "") {
setTopicsArr(prevTopicsArr => [...prevTopicsArr, newTopic]);
setNewTopic("");
}
};
const agendaFun = () => {
if (newTitle.trim() !== "" && newDescription.trim() !== "" && topicsArr.length
> 0) {
const agenda = {
title: newTitle,
description: newDescription,
topics: topicsArr
};
setAddedAgenda(prevAddedAgenda => [...prevAddedAgenda, agenda]);
setnewTitle("");
setNewDescription("");
setNewTopic("");
setTopicsArr([]);
}
};
const formCheck = e => {
e.preventDefault();
};
const checkAgendaFun = () => {
setShowAgendaBlock(prevShowAgendaBlock => !prevShowAgendaBlock);
};
// your methods goes here
return (
<div>
<h1 className="mx-5 mb-5">Agenda Manager</h1>
{/* show/hide this following add agenda template */}
{!showAgendaBlock && (
<div className="container" role="addAgenda">
<button className="btn btn-info" role="goToView"
onClick={checkAgendaFun}>
Click To View Agenda
</button>
<form onSubmit={formCheck}>
<div className="my-3">
<label className="form-label">Title</label>
{/* title */}
<input
type="text"
name="newTitle"
placeholder="Enter the title"
className="form-control"
role="inputTitle"
value={newTitle}
onChange={changeFun}
/>
<small className="text-danger" data-testid="invalidTitle">

{newTitle.trim().length === 0 && "Title is required"}

</small>
</div>
<div className="my-3">
<label className="form-label">Description</label>
{/* description */}
 <input
type="text"
name="newDescription"
placeholder="Enter the description"
className="form-control"
role="inputDescription"
value={newDescription}
onChange={changeFun}
/>
<small className="text-danger" data-testid="invalidDescription">

{newDescription.trim().length === 0 && "Description is required"}

</small>
</div>
<div className="my-3 w-50">
<label className="form-label">Enter topic</label>
{/* topic */}
<input
type="text"
name="newTopic"
placeholder="Enter the topic"
className="form-control"
role="inputTopic"
value={newTopic}
onChange={changeFun}
/>
<small className="text-danger" data-testid="invalidTopic">
{/**
* show empty string if topic input is valid
* els
* e show 'Topic is required'
*/}
{(newTopic.trim().length === 0 && topicsArr.length === 0) && "Topic
is required"}
</small>
</div>
{/* on click should add topics and disable the button if invalid topic
*/}
<button className="btn btn-success addAlign" role="addTopicBtn"
onClick={topicFun}
disabled={newTopic.trim() === ""}>+ Add Topic
</button>
{/* on click should add agenda details and disable the button if
invalid inputs */}
<button
className="btn btn-success submitAlign"
role="submitAgendaBtn"
onClick={agendaFun}
disabled={newTitle.trim() === "" || newDescription.trim() === "" ||
topicsArr.length === 0}
>
Submit Agenda
</button>
</form>

{topicsArr.length === 0 && (

 < div className="text-danger ml-2 mt-5" data-testid="noTopicsMsg">
No Topics Added
</div>
)}
{topicsArr.length > 0 && (
<div className="card my-3">
<div className="card-header">Added Topics</div>
<div className="card-body">
<ul className="list-group">
{topicsArr.map((topic, index) => (
<li className="list-group-item" role="topicList" key={index}>
{topic}
</li>
))}
</ul>
</div>
<div className="card-footer">Refer the topics you added</div>
</div>
)}
</div>
)
}
{/* show/hide this following view agenda template */}
{
showAgendaBlock && (
<div className="container" role="viewAgenda">
<button className="btn btn-info" role="goToAdd"
onClick={checkAgendaFun}>
Click To Add Agenda
</button>
{/* iterate the agenda details to display */}
{addedAgenda.map((agenda, index) => (
<div className="card my-3" role="cards" key={index}>
<div className="card-header">{agenda.title}</div>
<div className="card-body">
<ul className="list-group">
{/* iterate the topics to display */}
{agenda.topics.map((topic, index) => (
<li className="list-group-item" key={index}>
{topic}
</li>
))}
</ul>
</div>
<div className="card-footer">{agenda.description}</div>
</div>
))}
</div>
)
}
</div >
);
}
export default App;