import React, { useState } from 'react';
import cx from 'classnames';
import { GlyphButton } from '../glyphButton';
import { HiddenCount } from '../hiddenCount';
import type { ComponentBaseProps } from '../../types';

const CLASS_NAME = 'FilterCloud';

export interface FilterCloudItem {
    /**
     * The React element to render (typically Select or SearchInput).
     */
    element: React.ReactElement;
    /**
     * Whether this filter has an active/applied value.
     * Filters with applied values are always shown regardless of maxVisibleCount.
     */
    isApplying?: boolean;
}

export interface FilterCloudProps extends ComponentBaseProps {
    style?: React.CSSProperties;
    /**
     * Primary filters that are always visible. At least one is required.
     */
    primary: FilterCloudItem[];
    /**
     * Secondary filters that are hidden by default but shown when expanded or when any are applying.
     */
    secondary?: FilterCloudItem[];
    /**
     * Callback function when clear filters button is clicked.
     */
    onClearFilters: () => void;
}

/**
 * FilterCloud is an expandable container of filter components like Select and SearchInput.
 * It initially shows a limited number of filters with an expand/collapse toggle for the rest.
 *
 * @type molecule
 * @status live
 * @tags utilities
 */
export const FilterCloud: React.FC<FilterCloudProps> = ({
    className,
    style,
    testId = CLASS_NAME,
    primary,
    secondary = [],
    onClearFilters,
}) => {
    const [userExpanded, setUserExpanded] = useState(false);

    // Auto-expand if any secondary filters are applying, or user manually expanded
    const someSecondaryIsApplying = secondary.some((item) => item.isApplying);
    const isExpanded = someSecondaryIsApplying || userExpanded;
    const someIsApplying = someSecondaryIsApplying || primary.some((item) => item.isApplying);

    return (
        <div className={cx(CLASS_NAME, className)} style={style} data-testid={testId}>
            {primary.map((i, idx) => (
                <div key={`primary-${idx}`} className={`${CLASS_NAME}-filter primary`}>
                    {i.element}
                </div>
            ))}

            {isExpanded &&
                secondary.map((i, idx) => (
                    <div key={`secondary-${idx}`} className={`${CLASS_NAME}-filter secondary`}>
                        {i.element}
                    </div>
                ))}

            {secondary.length && (
                <>
                    <HiddenCount
                        doubleChevron
                        expanded={isExpanded}
                        hiddenCount={secondary.length}
                        showExpander={!!secondary.length}
                        disabled={someSecondaryIsApplying}
                        onClick={() => setUserExpanded(!userExpanded)}
                    />

                    {onClearFilters && someIsApplying && (
                        <GlyphButton variant="tertiary" name="clear" onClick={onClearFilters} />
                    )}
                </>
            )}
        </div>
    );
};