import { create } from "zustand"

//typeItem type
export type toastItem = {
    id?: string,
    message: string | React.ReactNode,
    type: "success" | "error" | "default" | string,
    isOpen?: boolean
}


//toast array type
interface toast{
    toast: Array<toastItem>,
    addToast: (toast: toastItem) => void,
    removeToast: (id: string) => void
}


const MAX_VALUE = 3


export const useToast = create<toast>((set => ({
    toast: [],

    //function to add toasts
    addToast: (toast:toastItem) => {
        const id = crypto.randomUUID()
        set((state) => {
            const updatedtoasts = [...state.toast]

            if(updatedtoasts.length >= MAX_VALUE){
                const oldest = updatedtoasts.find(t => t.isOpen)
                if(oldest){
                    oldest.isOpen = false
                    set((s) => ({
                        toast: s.toast.filter((tost) => tost.id !== oldest.id)
                    }))
                }}
            updatedtoasts.push({
                ...toast, id: id, isOpen: true
            })
            return { toast: updatedtoasts}
        }

    )

        //remove toast after some period of time (5s)
        setTimeout(() => {
            set((state) => ({
                toast: state.toast.map((t) => 
                    t.id === id ? {...t, isOpen: false} : t
                )
            }))

            set((state) => ({
                toast: state.toast.filter((t) => t.id !== id)
            }))

        }, 5000)
    },
    //remove toast function
    removeToast: (id: string) => set((state) => ({toast: state.toast.filter(t => t.id !== String(id)), isOpen: state.toast.length - 1 > 0}))
})))

"use client"
import { AnimatePresence, motion as m, Variants} from 'motion/react'
import { useToast } from '@/utils/useToast'
import { X } from 'lucide-react'
import { cn } from '@/lib/utils'

interface toastprops{
    position?: "tl" | "bc" | "bl" | "tr" | "tc" | "br",
    className?: string,
    stacked?: boolean 
}

export const Toast = ({position, 
  className, stacked=false}:toastprops) => {


  const { toast, removeToast } = useToast()  

  // defining the different positions
  const pos = position === "tl" ? " top-4 left-2" :
              position === "bc" ? "mx-auto bottom-4 left-0 right-0" :
              position === "bl" ? "bottom-4 left-2" :
              position === "tr" ? "top-4 right-2" :
              position === "tc" ? "mx-auto top-4 left-0 right-0" : "bottom-4 right-2"
  
  // defining style "error" and "success"
  const styles = {
    error: "border-red-300 dark:border-red-800",
    success: "border-green-300 dark:border-green-800",
  }

  // defining origin y & x directions for animations
  const ydirection = position?.split("")[0] === "t" ? -1 : 1
  const xdirection = position?.split("")[1] === "l" ? -1 : 1

  // stacking variant
  const toastVariants:Variants = {
        "hidden": {
            opacity: 0,
            y: (ydirection * 20),
            scale: 0.8
        },
        visible: (i) => ({
            opacity: 1,
            y: i === (toast.length - 1) ? 0 : ((toast.length - (i + 1)) * (ydirection * -15)),
            scale: i === (toast.length - 1) ? 1 : 1 - (toast.length - i) * 0.055
        }),
        "exit": {
          opacity: 0,
          scale: 0.85
        }
    }
  
    // flex-col layout toast arrangement variant
    const layoutVariant:Variants = {
       "hidden": {
            opacity: 0,
            x: (xdirection * 50)
        },
        visible: (i) => ({
            opacity: 1,
            x: 0,
            y: i === (toast.length - 1) ? 0 : `${((toast.length - (i + 1)) * (ydirection * -110))}%`,
        }),
        "exit": {
          opacity: 0,
          x: (xdirection * 50)
        }

    }


    const variant = stacked ? toastVariants : layoutVariant

  return (
    <>
      {/* Main variant component */}
      <AnimatePresence>
        {
          toast.map((t, i) => 
              t.isOpen &&
             <m.div key={t.id}
                style={{zIndex: 9999999}} 
                variants={variant}
                initial="hidden"
                animate="visible"
                exit={"exit"}
                custom={i}
                  className={cn('fixed w-80 p-2 rounded-md border-2 text-[14px] border-col bg-(--bg)',
                    pos, className,
                    t.type === "error" ? styles.error : t.type === "success" ? styles.success : ""
                  )}>
                  {t.message}
                  <X size={16}
                   onClick={() => removeToast(t.id ? t.id : "0")} 
                   className='absolute top-1 cursor-pointer opacity-40 right-1'/>
              </m.div>
          )
        }
      </AnimatePresence>
    </>
  )
}