import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import React, { useRef, useState, useEffect } from 'react';
import PHXUrlApply from '../Func/PHXUrlApply/PHXUrlApply';
import { PHXSkeleton } from '../Skeleton';
import { useRouter, useSearchParams } from 'next/navigation';
export const IconLeftButton = ({ disabled, onClick }) => (React.createElement("a", { "aria-hidden": true, className: classNames('relative inline-flex h-[28px] w-[28px] items-center rounded-l-lg  px-3 text-gray-900 transition-all', disabled
        ? 'cursor-default bg-gray-200'
        : 'active:border-t-0.5 active:border-b-0.5 cursor-pointer active:bg-gray-100 active:shadow-[inset_0_1px_2px_rgba(0,0,0,0.25)]'), onClick: () => !disabled && onClick() },
    React.createElement(FontAwesomeIcon, { className: classNames('h-3 w-2.5', disabled ? 'text-gray-300' : 'text-gray-900'), icon: faAngleLeft })));
export const IconRightButton = ({ disabled, onClick }) => (React.createElement("a", { "aria-hidden": true, className: classNames('relative inline-flex h-[28px] w-[28px] items-center rounded-r-lg  px-3 text-gray-900 transition-all', disabled
        ? 'cursor-default bg-gray-200'
        : 'active:border-t-0.5 active:border-b-0.5 cursor-pointer active:bg-gray-100 active:shadow-[inset_0_1px_2px_rgba(0,0,0,0.25)]'), onClick: () => !disabled && onClick() },
    React.createElement(FontAwesomeIcon, { className: classNames('h-3 w-2.5', disabled ? 'text-gray-300' : 'text-gray-900'), icon: faAngleRight })));
export const PHXReportButtonTabV2 = ({ activeTab, className = '', configUrlApply, loading = false, onChange, tabs, minWidth = 180, }) => {
    const scrollRef = useRef(null);
    const containerRef = useRef(null);
    const [canScrollLeft, setCanScrollLeft] = useState(false);
    const [canScrollRight, setCanScrollRight] = useState(false);
    const [isHovering, setIsHovering] = useState(false); // Theo dõi hover
    const router = useRouter();
    const searchParams = useSearchParams();
    const getConfigUrlApply = () => {
        if (configUrlApply) {
            return {
                searchParams: (configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.searchParams) || searchParams,
                router: (configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.router) || router,
                replaceUrl: configUrlApply === null || configUrlApply === void 0 ? void 0 : configUrlApply.replaceUrl,
            };
        }
        return;
    };
    const updateConfigUrlApply = getConfigUrlApply();
    const updateScroll = () => {
        const el = scrollRef.current;
        if (!el)
            return;
        const hasLeft = el.scrollLeft > 5;
        const hasRight = el.scrollLeft + el.clientWidth < el.scrollWidth - 5;
        setCanScrollLeft(hasLeft);
        setCanScrollRight(hasRight);
    };
    useEffect(() => {
        updateScroll();
        const el = scrollRef.current;
        if (!el)
            return;
        const handleScroll = () => updateScroll();
        el.addEventListener('scroll', handleScroll);
        // Cập nhật lại khi resize (responsive)
        window.addEventListener('resize', updateScroll);
        return () => {
            el.removeEventListener('scroll', handleScroll);
            window.removeEventListener('resize', updateScroll);
        };
    }, [tabs]);
    const handleClick = (item) => {
        if (item.disabledActionClick)
            return;
        onChange(item.value);
        if (updateConfigUrlApply && item.key) {
            PHXUrlApply(item.key, item.value, item.listKeyReset || [], updateConfigUrlApply);
        }
    };
    const scrollBy = (px) => {
        var _a;
        (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollBy({ left: px, behavior: 'smooth' });
    };
    return (React.createElement("div", { className: `relative w-full pb-4 ${className} ` },
        React.createElement("div", { ref: containerRef, className: 'group relative flex items-center overflow-hidden rounded-xl bg-white shadow-[0rem_.3125rem_.3125rem_-0.15625rem_rgba(0,0,0,0.03),_0rem_.1875rem_.1875rem_-0.09375rem_rgba(0,0,0,0.02),_0rem_.125rem_.125rem_-0.0625rem_rgba(0,0,0,0.02),_0rem_.0625rem_.0625rem_-0.03125rem_rgba(0,0,0,0.03),_0rem_.03125rem_.03125rem_0rem_rgba(0,0,0,0.04),_0rem_0rem_0rem_.0625rem_rgba(0,0,0,0.06)]', onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false) },
            React.createElement("div", { className: 'relative flex-1 overflow-hidden' },
                React.createElement("div", { ref: scrollRef, className: 'no-scrollbar flex gap-0', onScroll: updateScroll, style: {
                        overflowX: 'auto',
                        scrollBehavior: 'smooth',
                        scrollbarWidth: 'none',
                        msOverflowStyle: 'none',
                    } }, tabs.map((item, index) => (React.createElement("div", { key: item.value, className: 'flex w-full items-center gap-y-3' },
                    loading ? (React.createElement(PHXSkeleton, { className: `min-w-[${minWidth}px] h-[56px] w-full`, size: 'small', type: 'only-report_v2' })) : (React.createElement("div", { className: 'w-full p-2' },
                        React.createElement("div", { className: `
                        flex h-[56px] w-full flex-shrink-0 flex-col justify-center rounded-xl px-3 transition-all
                        ${item.disabledActionClick ? 'cursor-default' : 'cursor-pointer'}
                        ${activeTab === item.value ? 'bg-gray-100' : item.disabledActionClick ? '' : 'hover:bg-gray-50'}
                      `, onClick: () => handleClick(item), style: { minWidth: `${minWidth}px` } },
                            React.createElement("div", { className: 'flex w-full items-center justify-between' },
                                React.createElement("p", { className: 'text-[13px] text-gray-500' }, item.name),
                                item.icon && React.createElement("span", { className: 'ml-2 flex items-center justify-center' }, item.icon.icon)),
                            React.createElement("p", { className: 'text-[13px] font-semibold text-black' }, item.count)))),
                    index < tabs.length - 1 && React.createElement("div", { className: 'h-[72px] w-[1px] flex-shrink-0 bg-gray-200' })))))),
            React.createElement("div", { className: classNames('absolute right-2 top-1/2 flex -translate-y-1/2 overflow-hidden rounded-lg border border-gray-300 bg-white shadow-lg transition-all duration-300', 'pointer-events-auto', isHovering && (canScrollLeft || canScrollRight)
                    ? 'translate-x-0 opacity-100'
                    : 'pointer-events-none translate-x-4 opacity-0'), style: { height: 28 } },
                React.createElement(IconLeftButton, { disabled: !canScrollLeft, onClick: () => scrollBy(-300) }),
                React.createElement("div", { className: 'h-[28px] w-[1px] flex-shrink-0 bg-gray-200' }),
                React.createElement(IconRightButton, { disabled: !canScrollRight, onClick: () => scrollBy(300) })))));
};
//# sourceMappingURL=ReportButtonV2.js.map