import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useContext } from 'react';
import { FormFiltersLayoutContext } from '../../components/PageHeader';
import { Form } from '../Form';
import { FormControlProvider } from '../FormControlProvider';
import { AllFiltersButton } from './AllFiltersButton';
import { formFiltersClassnames } from './constants';
import { FormFiltersDialog } from './FormFiltersDialog';
import { FormFiltersSkeleton } from './FormFiltersSkeleton';
import { MainFiltersWrapper, QuickFiltersWrapper, SubmitButtonWrapper, Wrapper, } from './styles';
import { useLogic } from './useLogic';
/**
 * Компонент для отображения фильтров формы
 */
export const FormFilters = (props) => {
    const { form, onSubmit, searchField: SearchField, mainFilters: MainFilters, quickFilters: QuickFilters, submitButton: SubmitButton, secondaryFilters: SecondaryFilters, onOpenModal, dialogProps, mainFiltersColumns, isLoading, } = useLogic(props);
    const { filtersClassName, quickFiltersClassName } = useContext(FormFiltersLayoutContext) ?? {};
    if (isLoading) {
        return _jsx(FormFiltersSkeleton, {});
    }
    return (_jsxs(_Fragment, { children: [_jsx(FormControlProvider, { size: "small", hideHelperText: true, children: _jsx(Form, { name: "astral-ui-form-filters", form: form, onSubmit: form.handleSubmit(onSubmit || (() => undefined)), className: filtersClassName, children: _jsxs(Wrapper, { children: [SearchField && _jsx(SearchField, { control: form.control }), _jsx(AllFiltersButton, { form: form, onOpenModal: onOpenModal, hasMainFilters: Boolean(MainFilters), hasSecondaryFilters: Boolean(SecondaryFilters), hasSearch: Boolean(SearchField), hasQuickFilters: Boolean(QuickFilters) }), _jsx(MainFiltersWrapper, { columns: mainFiltersColumns, children: MainFilters && (_jsx(MainFilters, { control: form.control, isModal: false })) }), SubmitButton && (_jsx(SubmitButtonWrapper, { children: _jsx(SubmitButton, { size: "medium", className: formFiltersClassnames.submitButton }) }))] }) }) }), QuickFilters && (_jsx(QuickFiltersWrapper, { className: quickFiltersClassName, children: _jsx(QuickFilters, { control: form.control }) })), _jsx(FormFiltersDialog, { ...dialogProps })] }));
};
