"use client"

import { Select } from "@base-ui-components/react/select"
import { AnimatePresence, motion } from "motion/react"
import { useState } from "react"

function BaseSelect() {
    const [open, setOpen] = useState(false)
    const [value, setValue] = useState<string | null>(null)

    const fruits = [
        { value: "apple", label: "Apple" },
        { value: "banana", label: "Banana" },
        { value: "cherry", label: "Cherry" },
        { value: "date", label: "Date" },
        { value: "elderberry", label: "Elderberry" },
    ]

    return (
        <>
            <Select.Root
                open={open}
                onOpenChange={setOpen}
                value={value}
                onValueChange={setValue}
                items={fruits}
            >
                <Select.Trigger
                    className="trigger"
                    render={
                        <motion.button
                            whileHover={{ scale: 1.02 }}
                            whileTap={{ scale: 0.98 }}
                            style={{ willChange: "transform" }}
                        >
                            <Select.Value>
                                {(selectedValue) =>
                                    selectedValue
                                        ? fruits.find(
                                              (f) => f.value === selectedValue
                                          )?.label
                                        : "Select a fruit..."
                                }
                            </Select.Value>
                            <Select.Icon>
                                <ChevronDownIcon />
                            </Select.Icon>
                        </motion.button>
                    }
                />

                <AnimatePresence>
                    {open && (
                        <Select.Portal>
                            <Select.Positioner>
                                <Select.Popup
                                    className="content"
                                    render={
                                        <motion.div
                                            initial={{
                                                opacity: 0,
                                                scale: 0.95,
                                            }}
                                            animate={{ opacity: 1, scale: 1 }}
                                            exit={{ opacity: 0, scale: 0.95 }}
                                            transition={{ duration: 0.15 }}
                                            style={{
                                                willChange:
                                                    "transform, opacity",
                                            }}
                                        >
                                            {fruits.map((fruit) => (
                                                <Select.Item
                                                    key={fruit.value}
                                                    value={fruit.value}
                                                    className="item"
                                                    render={
                                                        <motion.div
                                                            initial={{
                                                                color: "#f5f5f5",
                                                                backgroundColor:
                                                                    "#0b1011",
                                                            }}
                                                            whileHover={{
                                                                color: "#0f1115",
                                                                backgroundColor:
                                                                    "#8df0cc",
                                                            }}
                                                            transition={{
                                                                duration: 0.1,
                                                                ease: "linear",
                                                            }}
                                                            style={{
                                                                willChange:
                                                                    "background-color",
                                                            }}
                                                        />
                                                    }
                                                >
                                                    <Select.ItemText>
                                                        {fruit.label}
                                                    </Select.ItemText>
                                                </Select.Item>
                                            ))}
                                        </motion.div>
                                    }
                                />
                            </Select.Positioner>
                        </Select.Portal>
                    )}
                </AnimatePresence>
            </Select.Root>
            <StyleSheet />
        </>
    )
}

function ChevronDownIcon() {
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
        >
            <path d="m6 9 6 6 6-6" />
        </svg>
    )
}

/**
 * ==============   Styles   ================
 */
function StyleSheet() {
    return (
        <style>{`
            .container {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 200px;
            }

            .trigger {
                display: inline-flex;
                align-items: center;
                justify-content: space-between;
                border-radius: 5px;
                padding: 0 15px;
                font-size: 16px;
                line-height: 1;
                height: 35px;
                gap: 5px;
                width: 200px;
                background-color: #0b1011;
                color: #f5f5f5;
                border: 1px solid #1d2628;
            }

            .content {
                overflow: hidden;
                background-color: #0b1011;
                color: #f5f5f5;
                border: 1px solid #1d2628;
                border-radius: 5px;
            }

            .viewport {
                padding: 5px;
            }

            .item {
                font-size: 16px;
                line-height: 1;
                border-radius: 3px;
                display: flex;
                align-items: center;
                height: 25px;
                padding-right: 35px;
                padding-left: 25px;
                position: relative;
                user-select: none;
                cursor: pointer;
            }

            .item[data-highlighted] {
                outline: none;
                background-color: #0f1115;
                color: #f5f5f5;
            }
        `}</style>
    )
}

export default BaseSelect