import topics from "@/resources/topics";
import {useState} from "react";
import {BsArrowLeft, BsArrowRight} from "react-icons/bs";
import Button from "../Low/Button";
import Modal from "../Modal";

interface Props {
	isOpen: boolean;
	initialTopics: string[];
	onClose: VoidFunction;
	selectTopics: (topics: string[]) => void;
}

export default function TopicModal({isOpen, initialTopics, onClose, selectTopics}: Props) {
	const [selectedTopics, setSelectedTopics] = useState([...initialTopics]);

	return (
		<Modal isOpen={isOpen} onClose={onClose} title="Preferred Topics">
			<div className="flex flex-col w-full h-full gap-4 mt-4">
				<div className="w-full h-full grid grid-cols-2 -md:gap-1 gap-4">
					<div className="flex flex-col gap-2">
						<span className="border-b border-b-neutral-400/30">Available Topics</span>
						<div className=" max-h-[500px] overflow-y-scroll scrollbar-hide">
							{topics
								.filter((x) => !selectedTopics.includes(x))
								.map((x) => (
									<div key={x} className="odd:bg-mti-purple-ultralight/40 p-2 flex justify-between items-center">
										<span>{x}</span>
										<button
											onClick={() => setSelectedTopics((prev) => [...prev, x])}
											className="border border-mti-purple-light cursor-pointer p-2 rounded-lg bg-white drop-shadow transition ease-in-out duration-300 hover:bg-mti-purple hover:text-white">
											<BsArrowRight />
										</button>
									</div>
								))}
						</div>
					</div>
					<div className="flex flex-col gap-2">
						<span className="border-b border-b-neutral-400/30">Preferred Topics ({selectedTopics.length || "All"})</span>
						<div className=" max-h-[500px] overflow-y-scroll scrollbar-hide">
							{selectedTopics.map((x) => (
								<div key={x} className="odd:bg-mti-purple-ultralight/40 p-2 flex justify-between items-center text-right">
									<button
										onClick={() => setSelectedTopics((prev) => [...prev.filter((y) => y !== x)])}
										className="border border-mti-purple-light cursor-pointer p-2 rounded-lg bg-white drop-shadow transition ease-in-out duration-300 hover:bg-mti-purple hover:text-white">
										<BsArrowLeft />
									</button>
									<span>{x}</span>
								</div>
							))}
						</div>
					</div>
				</div>
				<div className="w-full flex gap-4 items-center justify-end">
					<Button variant="outline" color="rose" className="w-full max-w-[200px]" onClick={onClose}>
						Close
					</Button>
					<Button
						className="w-full max-w-[200px]"
						onClick={() => {
							selectTopics(selectedTopics);
							onClose();
						}}>
						Select
					</Button>
				</div>
			</div>
		</Modal>
	);
}