'use client';
import { useState } from 'react';
import { createPortal } from 'react-dom';
import { HiAdjustmentsHorizontal } from 'react-icons/hi2';
import { Button, Paragraph } from '../../01-atoms';
import { AsideFilters } from '../../03-organisms';
/**
 * SideFilterTemplate component for rendering a filter sidebar with active filter count and filter controls.
 *
 * @component
 * @example
 * // Example usage of SideFilterTemplate component
 * <SideFilterTemplate
 *   filterCount={3}
 *   handleSetFilter={yourHandleSetFilterFunction}
 *   handledClearFilter={yourHandledClearFilterFunction}
 *   config={yourConfigObject}
 * />
 *
 * @param {Object} props - The properties of the SideFilterTemplate component.
 * @param {number} props.filterCount - The number of active filters.
 * @param {Function} props.handleSetFilter - The function to handle setting filters.
 * @param {Function} props.handledClearFilter - The function to handle clearing filters.
 * @param {any} props.config - The configuration object for the filters.
 *
 * @returns {ReactNode} The rendered SideFilterTemplate component.
 */
export function SideFilterTemplate({ filterCount, handleSetFilter, handledClearFilter, config, valuesFilter, }) {
    const [isOpen, setIsOpen] = useState(false);
    return (<>
      <div className="flex items-center gap-2">
        {Boolean(filterCount) && (<Paragraph size="chips">{filterCount} Filtros activos</Paragraph>)}
        <Button modifier="text" iconL={<HiAdjustmentsHorizontal />} onClick={() => setIsOpen(true)}>
          Filtros
        </Button>
      </div>
      {!!isOpen &&
            createPortal(<AsideFilters title="Filtros" closeCallback={() => setIsOpen(false)} filter={{
                    filtersEnabledText: 'Filtros activos:',
                    submitButton: {
                        text: 'Aplicar filtros',
                        callback: handleSetFilter,
                    },
                    resetButton: {
                        text: 'Limpiar',
                        callback: handledClearFilter,
                    },
                    getValuesFilter: (data) => {
                        if (valuesFilter) {
                            valuesFilter(data);
                        }
                    },
                    inputs: config,
                }}/>, document.body)}
    </>);
}
//# sourceMappingURL=SideFilterTemplate.jsx.map