"use client"

import {
    FontBoldIcon,
    FontItalicIcon,
    StrikethroughIcon,
    TextAlignCenterIcon,
    TextAlignLeftIcon,
    TextAlignRightIcon,
} from "@radix-ui/react-icons"
import { AnimatePresence, motion } from "motion/react"
import { Toolbar } from "radix-ui"
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 (
        <Toolbar.ToggleItem value={value} asChild>
            <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>
                {isSelected && !isMultiple && (
                    <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>
        </Toolbar.ToggleItem>
    )
}

export default function RadixToolbar() {
    const [formatting, setFormatting] = useState<string[]>([])
    const [alignment, setAlignment] = useState("left")

    return (
        <Toolbar.Root className="container" aria-label="Formatting options">
            <Toolbar.ToggleGroup
                value={formatting}
                onValueChange={setFormatting}
                className="toggle-group"
                type="multiple"
                aria-label="Text formatting"
            >
                <ToggleItem
                    currentValue={formatting}
                    value="bold"
                    aria-label="Bold"
                >
                    <FontBoldIcon />
                </ToggleItem>
                <ToggleItem
                    currentValue={formatting}
                    value="italic"
                    aria-label="Italic"
                >
                    <FontItalicIcon />
                </ToggleItem>
                <ToggleItem
                    currentValue={formatting}
                    value="strikethrough"
                    aria-label="Strike through"
                >
                    <StrikethroughIcon />
                </ToggleItem>
            </Toolbar.ToggleGroup>
            <Toolbar.Separator className="separator" />
            <Toolbar.ToggleGroup
                className="toggle-group"
                type="single"
                value={alignment}
                onValueChange={setAlignment}
                aria-label="Text alignment"
            >
                <ToggleItem
                    currentValue={alignment}
                    value="left"
                    aria-label="Left aligned"
                >
                    <TextAlignLeftIcon />
                </ToggleItem>
                <ToggleItem
                    currentValue={alignment}
                    value="center"
                    aria-label="Center aligned"
                >
                    <TextAlignCenterIcon />
                </ToggleItem>
                <ToggleItem
                    currentValue={alignment}
                    value="right"
                    aria-label="Right aligned"
                >
                    <TextAlignRightIcon />
                </ToggleItem>
            </Toolbar.ToggleGroup>
            <Toolbar.Separator className="separator" />

            <Toolbar.Button className="button" style={{ marginLeft: "auto" }}>
                Share
            </Toolbar.Button>
            <StyleSheet />
        </Toolbar.Root>
    )
}

/**
 * ==============   Styles   ================
 */

function StyleSheet() {
    return (
        <style>{`
        .container {
            display: flex;
            padding: 10px;
            width: 100%;
            max-width: 350px;
            min-width: max-content;
            border-radius: 6px;
            background-color: #0b1011;
            border-radius: 10px;
        }

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

        .toggle-group {
            display: flex;
            flex-direction: row;
            gap: 4px;
        }

        .toggle-item,
        .link,
        .button {
            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;
        }

        .toggle-item {
            position: relative;
        }

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

        .separator {
            width: 1px;
            background-color: #1d2628;
            margin: 0 10px;
        }

        @media (max-width: 520px) {
            .toggle-item,
            .link,
            .button {
                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;
        }

        .button {
            padding-left: 15px;
            padding-right: 15px;
            font-size: 16px;
            color: #f5f5f5;
            background-color: #ff0088;
        }

        .button:hover {
            background-color: #ff0088;
        }
    `}</style>
    )
}