import React, {FC, useState} from "react";
import {useIsMobile, useTreeDashboardAvailableDimensions} from "../hooks";
import {EmulatedCrossBackground} from "./EmulatedBackground";
import {__} from "../../globals";
import {FeaturedPreset, FeaturedPresetProps, Preset} from "./FeaturedPreset";
import {Tab} from "@headlessui/react";
import classNames from "classnames";
import {PresetSection, PresetSections} from "./PresetSections";
import {isPlainObject} from "lodash";
import {PresetsGrid} from "./PresetsGrid";
import {CustomPreset} from "./CustomPreset";
import {Presets} from "./Presets";

export type PresetsProps = {}

export const TreePresets: FC<PresetsProps> = ({}) => {
    const {leftOffset, rightOffset, edgeOffset} = useTreeDashboardAvailableDimensions()
    const isMobile = useIsMobile()
    const [selectedTabIndex, setSelectedTabIndex] = useState(0)
    const [tabs] = useState<{ id: string, label: string }[]>([
        {
            id: 'bogo',
            label: __('BOGO'),
        },
    ])
    /**
     * example:
     *  {
     *      'preset-868585: { ...preset data... },
     *      'preset-868586: { ...preset data... },
     *  }
     */
    const [presets] = useState<(Preset[] | PresetSection)[]>([
    ])

    const selectedTabIsSectioned = isPlainObject(presets[selectedTabIndex])
    // How much of the original sidebar-offset area should still show the pattern.
    // Increase edgeShrink to make the white center intrude more into the sidebar space (narrower patterned edges).
    const edgeShrink = 60

    // Visible (transparent) edge widths after shrinking (never negative).
    const leftVisible = Math.max(0, leftOffset - edgeShrink)
    const rightVisible = Math.max(0, rightOffset - edgeShrink)

    // Narrower white center with a wider patterned edge: fractions control transparency vs white.
    const edgeVisibleFraction = 0.35 // portion of each sidebar offset kept fully transparent (pattern visible)
    const fadeFraction = 0.35       // portion (relative to offset) used to fade into white
    const minFadePx = 80            // minimum fade length to avoid harsh edges

    // Left side calculations
    const leftTransparentEnd = Math.min(leftOffset, leftOffset * edgeVisibleFraction)
    const leftFadeLen = Math.max(minFadePx, leftOffset * fadeFraction)
    const leftFadeEnd = Math.min(leftOffset, leftTransparentEnd + leftFadeLen)

    // Right side calculations
    const rightTransparentEnd = Math.min(rightOffset, rightOffset * edgeVisibleFraction)
    const rightFadeLen = Math.max(minFadePx, rightOffset * fadeFraction)
    const rightFadeEnd = Math.min(rightOffset, rightTransparentEnd + rightFadeLen)

    // Gradient stops (mirrored):
    // 1. Transparent edge strip
    // 2. Soft fade (semi opacity)
    // 3. Solid white center span
    // 4. Mirror fade & transparent edge on right
    const overlayGradient = `linear-gradient(to right,
        rgba(255,255,255,0) 0px,
        rgba(255,255,255,0) ${leftTransparentEnd}px,
        rgba(255,255,255,0.65) ${leftTransparentEnd + (leftFadeLen * 0.85)}px,
        #ffffff ${leftFadeEnd}px,
        #ffffff calc(100% - ${rightFadeEnd}px),
        rgba(255,255,255,0.65) calc(100% - ${rightTransparentEnd + (rightFadeLen * 0.85)}px),
        rgba(255,255,255,0) calc(100% - ${rightTransparentEnd}px),
        rgba(255,255,255,0) 100%)`

    let selectedId = tabs[selectedTabIndex]?.id || 'custom';

    // Mobile-friendly padding values - minimal padding to maximize screen usage
    const mobilePaddingLeft = 8
    const mobilePaddingRight = 8
    const mobilePaddingTop = edgeOffset + 60  // Account for mobile top bar

    return <div className={classNames('w-full h-full relative overflow-y-scroll', {
        'bg-white': isMobile,
    })} style={{
        paddingLeft: isMobile ? mobilePaddingLeft : leftOffset,
        paddingRight: isMobile ? mobilePaddingRight : rightOffset,
        paddingTop: isMobile ? mobilePaddingTop : edgeOffset,
        paddingBottom: isMobile ? 100 : 0,  // Account for mobile bottom nav
    }}>
        {!isMobile && <EmulatedCrossBackground gap={25} size={8} opacity={0.6}/>}
        {/* White center overlay that fades out so pattern only visible near the sides */}
        {!isMobile && <div className={'pointer-events-none absolute inset-0 z-10'} style={{background: overlayGradient}}/>}
        <div className={'relative z-20 space-y-8 h-full'}>
            <Presets />
        </div>
    </div>
}