"use client"

import { Toggle } from "@base-ui-components/react/toggle"
import { ToggleGroup } from "@base-ui-components/react/toggle-group"
import { AnimatePresence, motion } from "motion/react"
import { useState } from "react"

function ToggleItem({
    children,
    value,
    currentValue,
    ...rest
}: {
    currentValue: string | string[]
    value: string
    children: React.ReactNode
    "aria-label": string
}) {
    const isMultiple = Array.isArray(currentValue)
    const isSelected = isMultiple
        ? currentValue.includes(value)
        : currentValue === value

    return (
        <Toggle
            value={value}
            render={
                <motion.button
                    initial={{ scale: 1, backgroundColor: "#2b323d00" }}
                    animate={
                        isSelected && isMultiple
                            ? { backgroundColor: "#2b323dff" }
                            : {}
                    }
                    whileTap={{ scale: 0.9 }}
                    whileFocus={{ boxShadow: "0 0 0 2px #ff0088" }}
                    className="toggle-item"
                    {...rest}
                >
                    <span>{children}</span>
                    <AnimatePresence initial={false}>
                        {isSelected && !isMultiple && (
                            <motion.div
                                initial={{ opacity: 0 }}
                                animate={{ opacity: 1 }}
                                exit={{ opacity: 0 }}
                                className="selected-indicator"
                                layoutId="selected-indicator"
                            />
                        )}
                    </AnimatePresence>
                </motion.button>
            }
        />
    )
}

export default function BaseToggleGroup() {
    const [textAlign, setTextAlign] = useState("center")

    return (
        <div className="container">
            <div className="section">
                <ToggleGroup
                    value={[textAlign]}
                    onValueChange={(value) => setTextAlign(value[0] || "")}
                    className="toggle-group"
                >
                    <ToggleItem
                        value="left"
                        currentValue={textAlign}
                        aria-label="Left aligned"
                    >
                        <TextAlignLeftIcon />
                    </ToggleItem>
                    <ToggleItem
                        value="center"
                        currentValue={textAlign}
                        aria-label="Center aligned"
                    >
                        <TextAlignCenterIcon />
                    </ToggleItem>
                    <ToggleItem
                        value="right"
                        currentValue={textAlign}
                        aria-label="Right aligned"
                    >
                        <TextAlignRightIcon />
                    </ToggleItem>
                </ToggleGroup>
            </div>

            <StyleSheet />
        </div>
    )
}

// Icon components
function TextAlignLeftIcon() {
    return (
        <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
            <path
                d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM2 7.5C2 7.22386 2.22386 7 2.5 7H7.5C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8H2.5C2.22386 8 2 7.77614 2 7.5ZM2 10.5C2 10.2239 2.22386 10 2.5 10H10.5C10.7761 10 11 10.2239 11 10.5C11 10.7761 10.7761 11 10.5 11H2.5C2.22386 11 2 10.7761 2 10.5Z"
                fill="currentColor"
            />
        </svg>
    )
}

function TextAlignCenterIcon() {
    return (
        <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
            <path
                d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM4 7.5C4 7.22386 4.22386 7 4.5 7H10.5C10.7761 7 11 7.22386 11 7.5C11 7.77614 10.7761 8 10.5 8H4.5C4.22386 8 4 7.77614 4 7.5ZM3 10.5C3 10.2239 3.22386 10 3.5 10H11.5C11.7761 10 12 10.2239 12 10.5C12 10.7761 11.7761 11 11.5 11H3.5C3.22386 11 3 10.7761 3 10.5Z"
                fill="currentColor"
            />
        </svg>
    )
}

function TextAlignRightIcon() {
    return (
        <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
            <path
                d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM7 7.5C7 7.22386 7.22386 7 7.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H7.5C7.22386 8 7 7.77614 7 7.5ZM4 10.5C4 10.2239 4.22386 10 4.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H4.5C4.22386 11 4 10.7761 4 10.5Z"
                fill="currentColor"
            />
        </svg>
    )
}

/**
 * ==============   Styles   ================
 */
function StyleSheet() {
    return (
        <style>{`
            .container {
                display: flex;
                padding: 10px;
                min-width: max-content;
                border-radius: 6px;
                background-color: #0b1011;
                border-radius: 10px;
                gap: 5px;
            }

            .container svg {
                width: 24px;
                height: 24px;
            }

            .toggle-item {
                flex: 0 0 auto;
                color: #f5f5f5;
                padding: 8px;
                border-radius: 4px;
                display: inline-flex;
                font-size: 14px;
                line-height: 1;
                align-items: center;
                justify-content: center;
                position: relative;
            }

            .toggle-item > span {
                position: relative;
                z-index: 1;
            }

            @media (max-width: 520px) {
                .toggle-item {
                    padding: 5px;
                }

                .container svg {
                    width: 16px;
                    height: 16px;
                }
            }

            .selected-indicator {
              position: absolute;
              top: 0;
              left: 0;
              bottom: 0;
              right: 0;
              background-color: #2b323dff;
              border-radius: 5px;
              mix-blend-mode: lighten;
            }
        `}</style>
    )
}