'use client';
import * as facelessUIImport from '@faceless-ui/window-info';
import { getTranslation } from '@payloadcms/translations';
import { fieldAffectsData } from 'payload/types';
import React, { useState } from 'react';
import AnimateHeightImport from 'react-animate-height';
const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
import { Chevron } from '../../icons/Chevron/index.js';
import { useSearchParams } from '../../providers/SearchParams/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import ColumnSelector from '../ColumnSelector/index.js';
import { DeleteMany } from '../DeleteMany/index.js';
import { EditMany } from '../EditMany/index.js';
import Pill from '../Pill/index.js';
import { PublishMany } from '../PublishMany/index.js';
import SearchFilter from '../SearchFilter/index.js';
import { UnpublishMany } from '../UnpublishMany/index.js';
import WhereBuilder from '../WhereBuilder/index.js';
import validateWhereQuery from '../WhereBuilder/validateWhereQuery.js';
const baseClass = 'list-controls';
/**
 * The ListControls component is used to render the controls (search, filter, where)
 * for a collection's list view. You can find those directly above the table which lists
 * the collection's documents.
 */ export const ListControls = (props)=>{
    const { collectionConfig, enableColumns = true, enableSort = false, handleSearchChange, handleSortChange, handleWhereChange, modifySearchQuery = true, textFieldsToBeSearched, titleField } = props;
    const { useWindowInfo } = facelessUIImport;
    const { searchParams } = useSearchParams();
    const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where);
    const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? 'where' : undefined);
    const { i18n, t } = useTranslation();
    const { breakpoints: { s: smallBreak } } = useWindowInfo();
    return /*#__PURE__*/ React.createElement("div", {
        className: baseClass
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__wrap`
    }, /*#__PURE__*/ React.createElement(SearchFilter, {
        fieldLabel: (titleField && getTranslation(titleField.label || titleField.name, i18n)) ?? undefined,
        fieldName: titleField && fieldAffectsData(titleField) ? titleField.name : undefined,
        handleChange: handleSearchChange,
        listSearchableFields: textFieldsToBeSearched,
        modifySearchQuery: modifySearchQuery
    }), /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__buttons`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__buttons-wrap`
    }, !smallBreak && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(EditMany, {
        collection: collectionConfig
    }), /*#__PURE__*/ React.createElement(PublishMany, {
        collection: collectionConfig
    }), /*#__PURE__*/ React.createElement(UnpublishMany, {
        collection: collectionConfig
    }), /*#__PURE__*/ React.createElement(DeleteMany, {
        collection: collectionConfig
    })), enableColumns && /*#__PURE__*/ React.createElement(Pill, {
        "aria-controls": `${baseClass}-columns`,
        "aria-expanded": visibleDrawer === 'columns',
        className: `${baseClass}__toggle-columns ${visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''}`,
        icon: /*#__PURE__*/ React.createElement(Chevron, null),
        onClick: ()=>setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined),
        pillStyle: "light"
    }, t('general:columns')), /*#__PURE__*/ React.createElement(Pill, {
        "aria-controls": `${baseClass}-where`,
        "aria-expanded": visibleDrawer === 'where',
        className: `${baseClass}__toggle-where ${visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''}`,
        icon: /*#__PURE__*/ React.createElement(Chevron, null),
        onClick: ()=>setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined),
        pillStyle: "light"
    }, t('general:filters')), enableSort && /*#__PURE__*/ React.createElement(Pill, {
        "aria-controls": `${baseClass}-sort`,
        "aria-expanded": visibleDrawer === 'sort',
        className: `${baseClass}__toggle-sort`,
        icon: /*#__PURE__*/ React.createElement(Chevron, null),
        onClick: ()=>setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined),
        pillStyle: "light"
    }, t('general:sort'))))), enableColumns && /*#__PURE__*/ React.createElement(AnimateHeight, {
        className: `${baseClass}__columns`,
        height: visibleDrawer === 'columns' ? 'auto' : 0,
        id: `${baseClass}-columns`
    }, /*#__PURE__*/ React.createElement(ColumnSelector, {
        collectionSlug: collectionConfig.slug
    })), /*#__PURE__*/ React.createElement(AnimateHeight, {
        className: `${baseClass}__where`,
        height: visibleDrawer === 'where' ? 'auto' : 0,
        id: `${baseClass}-where`
    }, /*#__PURE__*/ React.createElement(WhereBuilder, {
        collectionPluralLabel: collectionConfig?.labels?.plural,
        collectionSlug: collectionConfig.slug,
        handleChange: handleWhereChange,
        modifySearchQuery: modifySearchQuery
    })), enableSort && /*#__PURE__*/ React.createElement(AnimateHeight, {
        className: `${baseClass}__sort`,
        height: visibleDrawer === 'sort' ? 'auto' : 0,
        id: `${baseClass}-sort`
    }, /*#__PURE__*/ React.createElement("p", null, "Sort Complex")));
};

//# sourceMappingURL=index.js.map