import { Button, Checkbox, Select, Typography } from "antd";

import { useState } from "react";

const { Text } = Typography;
const { Option } = Select;

const predefinedUsers = [
{ id: 1, name: "dhruv" },
{ id: 2, name: "dhruv2" },
{ id: 3, name: "dhruv3" },
];

function FinalTDList() {
const [task, setTask] = useState("");
const [taskList, setTaskList] = useState([]);
const [searchQuery, setSearchQuery] = useState("");
const [sortOrder, setSortOrder] = useState("asc");
const [editingTaskId, setEditingTaskId] = useState(null);

function addTask() {
if (task.trim() !== "") {
const newTask = {
id: Date.now(),
name: task,
assignedUser: "",
details: "",
completed: false,
};
setTaskList([...taskList, newTask]);
setTask("");
}
}

function saveTask() {
const updatedTasks = taskList.map((t) => {
if (t.id === editingTaskId) {
t.name = task;
}
return t;
});
setTaskList(updatedTasks);
setTask("");
setEditingTaskId(null);
}
function addDetails(id) {
const details = prompt("Enter task details:");
if (details) {
const updatedTasks = taskList.map((t) => {
if (t.id === id) {
t.details = details;
}
return t;
});
setTaskList(updatedTasks);
}
}

function updateTask(id) {
const taskToEdit = taskList.find((t) => t.id === id);
if (taskToEdit) {
 setTask(taskToEdit.name);
setEditingTaskId(id);
}
}

function deleteTask(id) {
const remainingTasks = taskList.filter((t) => t.id !== id);
setTaskList(remainingTasks);
}

function assignUser(id, userId) {

const updatedTasks = taskList.map((t) => {
if (t.id === id) {
t.assignedUser = predefinedUsers.find((user) => user.id === userId)?.name
|| "";
}
return t;
});
setTaskList(updatedTasks);
}

function toggleCompletion(id) {
const updatedTasks = taskList.map((t) => {
if (t.id === id) {
t.completed = !t.completed;
}
return t;
});
setTaskList(updatedTasks);
}

function getFilteredAndSortedTasks() {
const filteredTasks = taskList.filter((t) =>
t.name.toLowerCase().includes(searchQuery.toLowerCase())
);
if (sortOrder === "asc") {
filteredTasks.sort((a, b) => a.name.localeCompare(b.name));
} else {
filteredTasks.sort((a, b) => b.name.localeCompare(a.name));
}
return filteredTasks;
}

return (
<div className="flex justify-center items-center h-screen w-full bg-gray-400">
<div className="w-11/12 md:w-3/4 lg:w-1/2 bg-purple-800 rounded-lg shadow-lg
p-6">
<h1 className="text-white text-2xl font-bold text-center mb-6">React
TodoList</h1>
<div>
<input
className="mb-4 w-full p-2 rounded"
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="Enter task"
/>
<Button
className="w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-
blue-600 transition duration-300"
onClick={editingTaskId ? saveTask : addTask}
>
{editingTaskId ? "Save Task" : "Add Task"}
</Button>
</div>
<div className="mt-4">
<input
className="mb-4 w-full p-2 rounded"
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search tasks"
/>
</div>
<div className="mb-4">
<Button
className="mr-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-
600 transition duration-300"
onClick={() => setSortOrder("asc")}
>
Sort Ascending
</Button>
<Button
className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600
transition duration-300"
onClick={() => setSortOrder("desc")}
>
Sort Descending
</Button>
</div>
<ul>
{getFilteredAndSortedTasks().map((t) => (
<li key={t.id} className="mb-4 flex items-center justify-between bg-
white p-4 rounded shadow">
<div>
<Checkbox
checked={t.completed}
onChange={() => toggleCompletion(t.id)}
>
{t.completed ? <Text delete>{t.name}</Text> : t.name}
</Checkbox>
{t.details && <p className="text-sm text-gray-500 mt-
1">{t.details}</p>}
{t.assignedUser && (
<p className="text-sm text-gray-700 mt-1">Assigned to:
{t.assignedUser}</p>
)}
</div>
<div>
<Button
className="mr-2 bg-green-500 text-white px-4 py-1 rounded
hover:bg-green-600"
onClick={() => updateTask(t.id)}
>
Edit
</Button>
<Select
className="mr-2"
 placeholder="Assign User"
style={{ width: 120 }}
onChange={(value) => assignUser(t.id, value)}
>
{predefinedUsers.map((user) => (
<Option key={user.id} value={user.id}>
{user.name}
</Option>
))}
</Select>
<Button
className="mr-2 bg-purple-500 text-white px-4 py-1 rounded
hover:bg-purple-600"
onClick={() => addDetails(t.id)}
>
Add Details
</Button>
<Button
className="bg-red-500 text-white px-4 py-1 rounded hover:bg-red-
600"
onClick={() => deleteTask(t.id)}
>
Delete
</Button>
</div>
</li>
))}
</ul>
</div>
</div>
);
}

export default FinalTDList;