import React, { FC, useEffect, useRef, useState } from "react";
import { switchToClassic, TreeMenus } from "./tree/TreeMenus";
import { EmulatedButton } from "./tree/EmulatedButton";
import { __ } from "./globals";

export type DashboardHeaderProps = {
}

const backToClassicButton = <EmulatedButton onClick={switchToClassic} aria-label={__('Use Classic Coupon')}>
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
        <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
    </svg>
</EmulatedButton>;
export const DashboardHeader: FC<DashboardHeaderProps> = ({ }) => {
    return <div className="absolute top-0 left-0 z-50 pointer-events-none w-full h-[600px] overflow-y-auto bg-neutral-100">
        <ProgressiveBlur heightClass="h-30" />
        <div className="grid gap-4 w-full px-4 z-50 pointer-events-auto">
            <div className=" py-2 px- space-y-3">
                <div className="relative flex items-center gap-4 h-12 w-full px-3">
                    {backToClassicButton}

                    {true && <svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg"
                        className="min-w-7 min-h-7 max-w-7 max-h-7 relative z-100">
                        <rect width="46" height="46" rx="16" fill="url(#paint0_linear_303_18)" />
                        <rect width="46" height="46" rx="16" fill="#1F2327" />
                        <path opacity="0.8"
                            d="M31.1506 33.6324L36.6759 20.7545L36.6679 20.7424L25.8337 20.7252L24.5827 23.6477L31.1506 33.6324Z"
                            fill="white" fill-opacity="0.82" />
                        <path opacity="0.8"
                            d="M30.096 10.7516L16.0869 10.7321L22.6548 20.7167L25.8337 20.7252L30.108 10.7698L30.096 10.7516Z"
                            fill="white" fill-opacity="0.82" />
                        <path opacity="0.8"
                            d="M16.0755 34.0786L30.0885 34.1043L23.5207 24.1196L20.3356 24.1152L16.0675 34.0665L16.0755 34.0786Z"
                            fill="white" fill-opacity="0.82" />
                        <path opacity="0.8"
                            d="M15.0249 11.2039L9.49974 24.0818L9.50775 24.094L20.3357 24.1152L21.5928 21.1887L15.0249 11.2039Z"
                            fill="white" fill-opacity="0.82" />
                        <path opacity="0.8" d="M36.6678 20.7423L30.108 10.7698L25.8337 20.7251L36.6678 20.7423Z"
                            fill="white" />
                        <path opacity="0.8" d="M9.50752 24.094L16.0674 34.0666L20.3357 24.1151L9.50752 24.094Z"
                            fill="white" />
                        <defs>
                            <linearGradient id="paint0_linear_303_18" x1="23" y1="0" x2="23" y2="46"
                                gradientUnits="userSpaceOnUse">
                                <stop stop-color="#545454" />
                                <stop offset="1" stop-color="#2A2A2A" />
                            </linearGradient>
                        </defs>
                    </svg>}
                    {false && <svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg" className="min-w-7 min-h-7 max-w-7 max-h-7 opacity-70">
                        <rect width="46" height="46" rx="16" fill="url(#paint0_linear_420_2)" />
                        <rect width="46" height="46" rx="16" fill="#515A63" />
                        <path opacity="0.8" d="M31.7701 36.5404L38.0762 21.8428L38.0671 21.829L25.702 21.8093L24.2742 25.1448L31.7701 36.5404Z" fill="white" fill-opacity="0.82" />
                        <path opacity="0.8" d="M30.5665 10.4264L14.5778 10.4042L22.0737 21.7997L25.7019 21.8094L30.5802 10.4472L30.5665 10.4264Z" fill="white" fill-opacity="0.82" />
                        <path opacity="0.8" d="M14.5648 37.0497L30.5579 37.0791L23.062 25.6835L19.4268 25.6784L14.5556 37.0359L14.5648 37.0497Z" fill="white" fill-opacity="0.82" />
                        <path opacity="0.8" d="M13.3657 10.9427L7.05986 25.6403L7.069 25.6542L19.427 25.6784L20.8618 22.3384L13.3657 10.9427Z" fill="white" fill-opacity="0.82" />
                        <path opacity="0.8" d="M38.067 21.8289L30.5802 10.4472L25.7019 21.8093L38.067 21.8289Z" fill="white" />
                        <path opacity="0.8" d="M7.06872 25.6542L14.5555 37.036L19.427 25.6783L7.06872 25.6542Z" fill="white" />
                        <defs>
                            <linearGradient id="paint0_linear_420_2" x1="23" y1="0" x2="23" y2="46" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#545454" />
                                <stop offset="1" stop-color="#2A2A2A" />
                            </linearGradient>
                        </defs>
                    </svg>}
                    <TreeMenus />
                </div>
            </div>
        </div>

    </div>
    return <header className="absolute top-0 left-0 w-full z-50">
        <div className="pointer-events-none absolute inset-x-0 top-0 h-28 select-none -z-10 overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-b from-white/80 via-white/40 to-transparent backdrop-saturate-150 dark:from-black/80 dark:via-black/40 dark:to-transparent" />

            <div className="absolute inset-0 backdrop-blur-[24px] [mask-image:linear-gradient(to_bottom,black_0%,black_30%,transparent_55%)] [-webkit-mask-image:linear-gradient(to_bottom,black_0%,black_30%,transparent_55%)]" />
            <div className="absolute inset-0 backdrop-blur-[16px] [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_55%,transparent_75%)] [-webkit-mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_55%,transparent_75%)]" />
            <div className="absolute inset-0 backdrop-blur-[8px] [mask-image:linear-gradient(to_bottom,transparent_35%,black_55%,black_75%,transparent_90%)] [-webkit-mask-image:linear-gradient(to_bottom,transparent_35%,black_55%,black_75%,transparent_90%)]" />
            <div className="absolute inset-0 backdrop-blur-[4px] [mask-image:linear-gradient(to_bottom,transparent_55%,black_75%,black_90%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_bottom,transparent_55%,black_75%,black_90%,transparent_100%)]" />
            <div className="absolute inset-0 backdrop-blur-[1.5px] [mask-image:linear-gradient(to_bottom,transparent_75%,black_90%,black_98%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_bottom,transparent_75%,black_90%,black_98%,transparent_100%)]" />

            <div className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-gray-200/50 to-transparent dark:via-white/10" />
        </div>

        <div className="relative flex items-center gap-4 h-12 w-full px-3">
        <svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg"
            className="min-w-7 min-h-7 max-w-7 max-h-7 relative z-100">
            <rect width="46" height="46" rx="16" fill="url(#paint0_linear_303_18)" />
            <rect width="46" height="46" rx="16" fill="#1F2327" />
            <path opacity="0.8"
                d="M31.1506 33.6324L36.6759 20.7545L36.6679 20.7424L25.8337 20.7252L24.5827 23.6477L31.1506 33.6324Z"
                fill="white" fill-opacity="0.82" />
            <path opacity="0.8"
                d="M30.096 10.7516L16.0869 10.7321L22.6548 20.7167L25.8337 20.7252L30.108 10.7698L30.096 10.7516Z"
                fill="white" fill-opacity="0.82" />
            <path opacity="0.8"
                d="M16.0755 34.0786L30.0885 34.1043L23.5207 24.1196L20.3356 24.1152L16.0675 34.0665L16.0755 34.0786Z"
                fill="white" fill-opacity="0.82" />
            <path opacity="0.8"
                d="M15.0249 11.2039L9.49974 24.0818L9.50775 24.094L20.3357 24.1152L21.5928 21.1887L15.0249 11.2039Z"
                fill="white" fill-opacity="0.82" />
            <path opacity="0.8" d="M36.6678 20.7423L30.108 10.7698L25.8337 20.7251L36.6678 20.7423Z"
                fill="white" />
            <path opacity="0.8" d="M9.50752 24.094L16.0674 34.0666L20.3357 24.1151L9.50752 24.094Z"
                fill="white" />
            <defs>
                <linearGradient id="paint0_linear_303_18" x1="23" y1="0" x2="23" y2="46"
                    gradientUnits="userSpaceOnUse">
                    <stop stop-color="#545454" />
                    <stop offset="1" stop-color="#2A2A2A" />
                </linearGradient>
            </defs>
        </svg>
        {false && <svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg" className="min-w-6 min-h-6 max-w-6 max-h-6 opacity-60">
            <rect width="46" height="46" rx="16" fill="url(#paint0_linear_420_2)" />
            <rect width="46" height="46" rx="16" fill="#515A63" />
            <path opacity="0.8" d="M31.7701 36.5404L38.0762 21.8428L38.0671 21.829L25.702 21.8093L24.2742 25.1448L31.7701 36.5404Z" fill="white" fill-opacity="0.82" />
            <path opacity="0.8" d="M30.5665 10.4264L14.5778 10.4042L22.0737 21.7997L25.7019 21.8094L30.5802 10.4472L30.5665 10.4264Z" fill="white" fill-opacity="0.82" />
            <path opacity="0.8" d="M14.5648 37.0497L30.5579 37.0791L23.062 25.6835L19.4268 25.6784L14.5556 37.0359L14.5648 37.0497Z" fill="white" fill-opacity="0.82" />
            <path opacity="0.8" d="M13.3657 10.9427L7.05986 25.6403L7.069 25.6542L19.427 25.6784L20.8618 22.3384L13.3657 10.9427Z" fill="white" fill-opacity="0.82" />
            <path opacity="0.8" d="M38.067 21.8289L30.5802 10.4472L25.7019 21.8093L38.067 21.8289Z" fill="white" />
            <path opacity="0.8" d="M7.06872 25.6542L14.5555 37.036L19.427 25.6783L7.06872 25.6542Z" fill="white" />
            <defs>
                <linearGradient id="paint0_linear_420_2" x1="23" y1="0" x2="23" y2="46" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#545454" />
                    <stop offset="1" stop-color="#2A2A2A" />
                </linearGradient>
            </defs>
        </svg>}
        <TreeMenus />
        </div>
    </header>
}


function ProgressiveBlur({ heightClass = "h-40" }) {
    return (
        <div className={`absolute top-0 left-0 w-full ${heightClass} pointer-events-none`}>
            <div
                className="absolute inset-0"
                style={{
                    backdropFilter: "blur(24px)",
                    WebkitBackdropFilter: "blur(24px)",
                    maskImage: "linear-gradient(to bottom, gray 0%, gray 30%, transparent 100%)",
                    WebkitMaskImage: "linear-gradient(to bottom, gray 0%, gray 30%, transparent 100%)",
                }}
            />
            <div className="absolute inset-0 bg-gradient-to-b from-gray-200/30 via-gray-300/20 to-transparent" />
        </div>
    );
}