import React from "react"
import { colours, gradients, bgs } from "@/constants.js"
import Toasts from "@molecules/Toasts/Toasts"
import { useState } from "storybook/preview-api"
import { StoryFn } from "@storybook/react-webpack5"
import "./Colours.scss"

const Template: StoryFn = () => {
    const [show, setShow] = useState(false)
    const [color, setColor] = useState("")

    const handleColorClick = (event: React.MouseEvent<HTMLDivElement>) => {
        const val = event.currentTarget.getAttribute("data-value") || "Undefined"
        setColor(val)
        navigator.clipboard.writeText(val).then(() => {
            setShow(true)
        })
    }

    return (
        <div className="colour-swatches">
            <Toasts
                header={`Variable "${color}" copied!`}
                autohide={true}
                delay={2000}
                show={show}
                position="top-end"
                onClose={() => {
                    setShow(false)
                }}
            />
            <h3 className="mt-3">Theme Colours</h3>
            <div style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
                {Object.values(bgs).map((variant) => (
                    <div key={variant} style={{ display: "flex", flexDirection: "column", flexWrap: "wrap" }}>
                        <div
                            key={`${variant}-text-emphasis`}
                            title={getComputedStyle(document.body).getPropertyValue(`--bs-${variant}-text-emphasis`)}
                            data-value={`var(--bs-${variant}-text-emphasis)`}
                            className={"btn swatch"}
                            style={{ color: "white", backgroundColor: "var(--bs-" + variant + "-text-emphasis)" }}
                            onClick={handleColorClick}
                        ></div>
                        <div
                            key={`${variant}-dark`}
                            title={getComputedStyle(document.body).getPropertyValue(`--bs-${variant}-dark`)}
                            className={"btn swatch btn-" + variant + " bg-" + variant + "-dark"}
                            data-value={`var(--bs-${variant}-dark)`}
                            style={{ color: "white", borderColor: "var(--bs-" + variant + "-dark)" }}
                            onClick={handleColorClick}
                        ></div>
                        <div
                            key={`${variant}-colour`}
                            title={`rgb(${getComputedStyle(document.body).getPropertyValue(`--bs-${variant}-rgb`)})`}
                            className={"btn swatch btn-" + variant + " bg-" + variant}
                            data-value={`var(--bs-${variant})`}
                            style={{ backgroundColor: "var(--bs-" + variant + ")" }}
                            onClick={handleColorClick}
                        >
                            {variant}
                        </div>
                        <div
                            key={`${variant}-bg`}
                            title={getComputedStyle(document.body).getPropertyValue(`--bs-${variant}-border-subtle`)}
                            className={"btn swatch"}
                            style={{ backgroundColor: "var(--bs-" + variant + "-border-subtle)" }}
                            data-value={`var(--bs-${variant}-border-subtle)`}
                            onClick={handleColorClick}
                        ></div>
                    </div>
                ))}
            </div>
            <h3 className="mt-3">Borders & Backgrounds</h3>
            <div style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
                {Object.values(bgs).map((variant) => (
                    <div key={variant} style={{ display: "flex", flexDirection: "column", flexWrap: "wrap" }}>
                        <div
                            key={`${variant}-border-subtle`}
                            className={"btn swatch"}
                            style={{
                                border: 5,
                                borderStyle: "solid",
                                borderColor: "var(--bs-" + variant + "-border-subtle)",
                            }}
                            data-value={`var(--bs-${variant}-border-subtle)`}
                            onClick={handleColorClick}
                        ></div>
                        <div
                            key={`${variant}-subtle`}
                            title={getComputedStyle(document.body).getPropertyValue(`--bs-${variant}-bg-subtle`)}
                            className={"btn swatch"}
                            data-value={`var(--bs-${variant}-bg-subtle)`}
                            style={{ backgroundColor: `var(--bs-${variant}-bg-subtle)` }}
                            onClick={handleColorClick}
                        ></div>
                    </div>
                ))}
            </div>
            <h3 className="mt-3">Named Colours</h3>
            <div style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
                {Object.values(colours).map((colour) => (
                    <div
                        key={colour}
                        title={getComputedStyle(document.body).getPropertyValue(`--bs-${colour}`)}
                        data-value={`var(--bs-${colour})`}
                        className={"btn swatch"}
                        style={{ backgroundColor: `var(--bs-${colour})` }}
                        onClick={handleColorClick}
                    >
                        {colour}
                    </div>
                ))}
            </div>
            <h3 className="mt-3">Gradients</h3>
            <div style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
                {Object.values(gradients).map((gradient) => (
                    <div
                        key={gradient}
                        className={`gradswatch ${gradient.endsWith("light") ? "text-primary" : ""} gradient-${gradient}`}
                        data-value={`var(--bs-${gradient}-gradient)`}
                        onClick={handleColorClick}
                    >
                        {gradient}
                    </div>
                ))}
            </div>
        </div>
    )
}

export default {
    title: "foundations/Colours",
    component: Template,
    argTypes: {},
}

export let _Colours = Template.bind({})