import React, { useRef } from "react";
import styled, { css } from "styled-components";
import { Check } from "@styled-icons/boxicons-regular";
import { Palette } from "@styled-icons/boxicons-solid";
import { useDebounceCallback } from "../../../../lib/debounce";

interface Props {
    readonly presets?: string[][];

    readonly value: string;
    readonly onChange: (value: string) => void;
}

const DEFAULT_PRESETS = [
    [
        "#7B68EE",
        "#3498DB",
        "#1ABC9C",
        "#F1C40F",
        "#FF7F50",
        "#FD6671",
        "#E91E63",
        "#D468EE",
        "#594CAD",
        "#206694",
        "#11806A",
        "#C27C0E",
        "#CD5B45",
        "#FF424F",
        "#AD1457",
        "#954AA8",
    ],
    // [
    //     "#594CAD",
    //     "#206694",
    //     "#11806A",
    //     "#C27C0E",
    //     "#CD5B45",
    //     "#FF424F",
    //     "#AD1457",
    //     "#954AA8",
    // ],
];

const Base = styled.div`
    // display: flex;

    input {
        width: 0;
        padding: 0;
        border: 0;
        margin: 0;
        height: 0;
        top: 72px;
        opacity: 0;
        position: relative;
        pointer-events: none;
    }

    .overlay {
        position: relative;
        width: 0;

        div {
            width: 8px;
            height: 68px;
            background: linear-gradient(
                to right,
                var(--primary-background),
                transparent
            );
        }
    }
    .btnwrap {
        display: flex;
        gap: 10px;
    }

    .swatchwrap {
        display: flex;
    }
`;

const Swatch = styled.div<{ type: "small" | "large"; colour: string }>`

    cursor: pointer;
    background-color: ${(props) => props.colour};

    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.1s ease-in-out all;
    box-shadow: 0px 0px 3px;

    &:hover {
        border: 2px solid var(--foreground);
    }

    svg {
        transition: inherit;
        color: var(--accent-contrast);
    }

    ${(props) =>
        props.type === "small"
            ? css`
                  width: 30px;
                  height: 60px;
              `
            : css`
                  width: 68px;
                  height: 68px;
              `}
`;

const Selectedbtn = styled.div<{ colour: string }>`
    box-shadow: rgb(0, 0, 0, 0.15) 20px 20px, rgb(0, 0, 0, 0.04) 20px -30px;
    text-shadow: 0px 0px 0px white, 0px 0px 0px white, 15px 0px 25px white;
    cursor: pointer;
    padding: 10px;
    justify-content: center;
    align-items: center;
    background-color: ${(props) => props.colour};
    color: white;
    border: none;
    font-size: 24px;
    font-weight: 500;
    min-width: 200px;
    margin: 10px 0px 20px;
    display: flex;

    .icon {
        color: white;
        text-shadow: 0px 0px 0px white, 0px 0px 0px white, 15px 0px 25px white;
}
`;

const Platebtn = styled.div<{ colour: string }>`
    flex-shrink: 0;
    cursor: pointer;
    background-color: ${(props) => props.colour};
    box-shadow: rgb(0, 0, 0, 0.15) 20px 20px, rgb(0, 0, 0, 0.04) 20px -30px;
    text-shadow: 0px 0px 0px white, 0px 0px 0px white, 15px 0px 25px white;
    min-width: 200px;
    margin: 10px 0px 20px;
    display: flex;
    padding: 10px;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    font-weight: 500;

    transition: 0.1s ease-in-out all;

    svg {
        transition: inherit;
        color: var(--accent-contrast);
    }

`;

const Rows = styled.div`
    gap: 8px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 4px 0;

    > div {
        gap: 8px;
        display: flex;
        flex-direction: row;
        padding-inline-start: 8px;
    }
`;

export function ColourSwatches({ value, onChange, presets }: Props) {
    const ref = useRef<HTMLInputElement | null>(null!);
    const setValue = useDebounceCallback(
        (value) => onChange(value as string),
        [onChange],
        100,
    );

    return (
        <Base>
            <div className="btnwrap">
                <div>
                    <Selectedbtn
                        colour={value}
                    >
                        <Check className="icon" size={50} color='#000000'/>
                    </Selectedbtn>
                </div>
                <div className="swatchwrap">
                    <input
                        ref={ref}
                        type="color"
                        value={value}
                        onChange={(ev) => setValue(ev.currentTarget.value)}
                    />
                    <Platebtn
                        colour={value}
                        onClick={() => ref.current?.click()}>
                        <span>Custom</span>
                    </Platebtn>

                    <div className="overlay">
                        <div />
                    </div>
                </div>
            </div>

            <div>
                <Rows>
                    {(presets ?? DEFAULT_PRESETS).map((row, i) => (
                        <div key={i}>
                            {row.map((swatch, i) => (
                                <Swatch
                                    colour={swatch}
                                    type="small"
                                    key={i}
                                    onClick={() => onChange(swatch)}>
                                    {swatch === value && <Check size={22} />}
                                </Swatch>
                            ))}
                        </div>
                    ))}
                </Rows>
            </div>
        </Base>
    );
}