'use client'

import { motion } from 'framer-motion'
import { useState, useRef, useEffect } from 'react'
import clsx from 'clsx'
import { Package } from '@/models/Pricing'
import { useLocale } from 'next-intl'

interface PackageSwitchProps {
    pacakges: Package[]
    onSelect: (value: number) => void
    initialId?: string
}

export default function PackageSwitch({ pacakges, onSelect }: PackageSwitchProps) {
    const locale = useLocale()
    const isFr = locale === 'fr'

    const [selectedId, setSelectedId] = useState(pacakges[0]?.id)
    const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, top: 0, width: 0, height: 0 })
    const containerRef = useRef<HTMLDivElement>(null)
    const buttonRefs = useRef<(HTMLButtonElement | null)[]>([])

    useEffect(() => {
        const selectedIndex = pacakges.findIndex((opt) => opt.id === selectedId)
        const selectedButton = buttonRefs.current[selectedIndex]
        const container = containerRef.current

        if (selectedButton && container) {
            const isVertical = getComputedStyle(container).flexDirection === 'column'
            const { offsetTop, offsetHeight, offsetLeft, offsetWidth } = selectedButton

            setIndicatorStyle({
                top: isVertical ? offsetTop : 0,
                left: isVertical ? 0 : offsetLeft,
                width: isVertical ? container.clientWidth - 8 : offsetWidth - 8,
                height: isVertical ? offsetHeight : container.clientHeight - 8,
            })
        }
    }, [selectedId, pacakges])

    const handleClick = (option: Package) => {
        setSelectedId(option.id)
        onSelect(option.id)
    }

    return (
        <div
            ref={containerRef}
            className="relative flex max-sm:flex-col items-center w-fit max-sm:w-full overflow-x-auto border border-dashed rounded-lg p-2 gap-2"
        >
            <motion.div
                layout
                transition={{ type: 'spring', stiffness: 500, damping: 60 }}
                className="absolute rounded-md m-[4px] bg-white shadow-lg shadow-black/5"
                style={{
                    left: indicatorStyle.left,
                    top: indicatorStyle.top,
                    width: indicatorStyle.width,
                    height: indicatorStyle.height,
                }}
            />
            {pacakges.map((option, index) => (
                <button
                    key={option.id}
                    // @ts-expect-error ---
                    ref={(el) => (buttonRefs.current[index] = el)}
                    onClick={() => handleClick(option)}
                    className={clsx(
                        'relative z-10 px-4 py-2 text-sm font-medium text-center rounded-full duration-300 whitespace-nowrap w-full max-sm:w-full',
                        selectedId === option.id
                            ? 'text-black'
                            : 'text-gray-500 hover:text-black transition-colors'
                    )}
                >
                    {isFr ? option.packageNameFr : option.packageName}
                </button>
            ))}
        </div>
    )
}