"use client"

import { AnimatePresence, motion } from "motion/react"
import { useState } from "react"

export default function NotificationsList() {
    const [notifications, setNotifications] = useState([0])

    return (
        <div id="notifications">
            <ul>
                <AnimatePresence initial={false} mode="popLayout">
                    {notifications.map((id) => (
                        <motion.li
                            key={id}
                            layout
                            initial={{ opacity: 0, y: 50, scale: 0.3 }}
                            animate={{ opacity: 1, y: 0, scale: 1 }}
                            exit={{
                                opacity: 0,
                                scale: 0.5,
                                transition: { duration: 0.2 },
                            }}
                        >
                            <div className="placeholder-title" />
                            <div className="placeholder-message" />
                            <CloseButton
                                close={() =>
                                    setNotifications(remove(notifications, id))
                                }
                            />
                        </motion.li>
                    ))}
                </AnimatePresence>
            </ul>
            <button
                className="add"
                onClick={() => setNotifications(add(notifications))}
            >
                Add notification +
            </button>
            <StyleSheet />
        </div>
    )
}

const Path = (props: { d: string }) => (
    <motion.path
        fill="transparent"
        strokeWidth="3"
        stroke="var(--feint-text)"
        strokeLinecap="round"
        {...props}
    />
)

export const CloseButton = ({ close }: { close: () => void }) => (
    <button onClick={close} className="close">
        <svg width="18" height="18" viewBox="0 0 23 23">
            <Path d="M 3 16.5 L 17 2.5" />
            <Path d="M 3 2.5 L 17 16.346" />
        </svg>
    </button>
)

/**
 * ==============   Styles   ================
 */
function StyleSheet() {
    return (
        <style>{`
        #notifications {
            display: flex;
            width: 100vw;
            height: 100vh;
            flex-direction: column;
            z-index: 10000000;
            pointer-events: none;
          }
          
          #notifications ul,
          #notifications li {
            padding: 0;
            margin: 0;
          }
          
          #notifications ul {
            position: fixed;
            left: calc(50% - 150px);
            bottom: 0;
            display: flex;
            flex-direction: column;
            list-style: none;
            justify-content: flex-end;
            width: 300px;
            gap: 10px;
            padding: 10px;
          }
          
          #notifications li {
            background: #0b1011;
            border: 1px solid #1d2628;
            flex: 0 0 100px;
            position: relative;
            border-radius: 10px;
            pointer-events: all;
            padding: 20px 80px 20px 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
          }

          #notifications .placeholder-title {
            height: 24px;
            width: 200px;
            border-radius: 5px;
            background: var(--feint-text);
          }
          
          #notifications .placeholder-message {
            height: 14px;
            width: 150px;
            border-radius: 5px;
            background: var(--feint-text);
            opacity: 0.5;
          }
          
          #notifications button {
            outline: none;
            -webkit-appearance: none;
            cursor: pointer;
            pointer-events: all;
          }
          
          #notifications button.add {
            position: fixed;
            bottom: 10px;
            left: 10px;
            border-radius: 10px;
            font-size: 18px;
            background: var(--accent);
            color: #0f1115;
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px 12px;
          }
          
          #notifications button.close {
            position: absolute;
            top: 15px;
            right: 10px;
          }
          
    `}</style>
    )
}

/**
 * ==============   Utils   ================
 */
export const remove = (arr: number[], item: number) => {
    const newArr = [...arr]
    newArr.splice(
        newArr.findIndex((i) => i === item),
        1
    )
    return newArr
}

let newIndex = 0
export const add = (arr: number[]) => {
    newIndex++
    return [...arr, newIndex]
}