'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { fieldIsHiddenOrDisabled, fieldIsID } from 'payload/shared';
import React, { useId, useMemo } from 'react';
import { FieldLabel } from '../../fields/FieldLabel/index.js';
import { useEditDepth } from '../../providers/EditDepth/index.js';
import { useTableColumns } from '../../providers/TableColumns/index.js';
import { PillSelector } from '../PillSelector/index.js';
export const ColumnSelector = ({ collectionSlug })=>{
    const { columns, moveColumn, toggleColumn } = useTableColumns();
    const uuid = useId();
    const editDepth = useEditDepth();
    const filteredColumns = useMemo(()=>columns?.filter((col)=>!(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) && !col?.field?.admin?.disableListColumn), [
        columns
    ]);
    const pills = useMemo(()=>{
        return filteredColumns ? filteredColumns.map((col, i)=>{
            const { accessor, active, field } = col;
            const label = 'labelWithPrefix' in field && field.labelWithPrefix !== undefined ? field.labelWithPrefix : 'label' in field && field.label !== undefined ? field.label : 'name' in field && field.name !== undefined ? field.name : undefined;
            return {
                name: accessor,
                key: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,
                Label: /*#__PURE__*/ _jsxDEV(FieldLabel, {
                    label: label,
                    unstyled: true
                }, void 0, false, {
                    fileName: "src/elements/ColumnSelector/index.tsx",
                    lineNumber: 49,
                    columnNumber: 20
                }, this),
                selected: active
            };
        }) : null;
    }, [
        collectionSlug,
        editDepth,
        filteredColumns,
        uuid
    ]);
    if (!pills) {
        return null;
    }
    return /*#__PURE__*/ _jsxDEV(PillSelector, {
        draggable: {
            onDragEnd: ({ moveFromIndex, moveToIndex })=>{
                void moveColumn({
                    fromIndex: moveFromIndex,
                    toIndex: moveToIndex
                });
            }
        },
        onClick: ({ pill })=>{
            void toggleColumn(pill.name);
        },
        pills: pills
    }, void 0, false, {
        fileName: "src/elements/ColumnSelector/index.tsx",
        lineNumber: 61,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map