'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React, { useId, useMemo } from 'react';
import { FieldLabel } from '../../../../fields/FieldLabel/index.js';
import { useField } from '../../../../forms/useField/index.js';
import { useAuth } from '../../../../providers/Auth/index.js';
import { useConfig } from '../../../../providers/Config/index.js';
import { useTranslation } from '../../../../providers/Translation/index.js';
import { getColumns } from '../../../../utilities/getColumns.js';
import { reduceFieldsToOptions } from '../../../../utilities/reduceFieldsToOptions.js';
import { PillSelector } from '../../../PillSelector/index.js';
import './index.scss';
export const QueryPresetsColumnField = ({ field: { label, required } })=>{
    const { path, setValue, value } = useField();
    const relatedCollectionField = useField({
        path: 'relatedCollection'
    });
    const relatedCollection = relatedCollectionField.value;
    const { config, getEntityConfig } = useConfig();
    const { i18n } = useTranslation();
    const { permissions } = useAuth();
    const uuid = useId();
    const collectionConfig = useMemo(()=>relatedCollection ? getEntityConfig({
            collectionSlug: relatedCollection
        }) : null, [
        relatedCollection,
        getEntityConfig
    ]);
    const columns = useMemo(()=>{
        if (!relatedCollection || !collectionConfig) {
            return [];
        }
        return getColumns({
            clientConfig: config,
            collectionConfig,
            collectionSlug: relatedCollection,
            columns: value ?? [],
            i18n,
            permissions
        });
    }, [
        config,
        collectionConfig,
        relatedCollection,
        value,
        i18n,
        permissions
    ]);
    const reducedFields = useMemo(()=>{
        if (!collectionConfig?.fields) {
            return [];
        }
        return reduceFieldsToOptions({
            fieldPermissions: permissions?.collections?.[relatedCollection]?.fields ?? true,
            fields: collectionConfig.fields,
            i18n
        });
    }, [
        collectionConfig,
        i18n,
        permissions,
        relatedCollection
    ]);
    const accessorToLabel = useMemo(()=>{
        const map = {};
        for (const f of reducedFields){
            map[String(f.value)] = f.label;
        }
        return map;
    }, [
        reducedFields
    ]);
    const pills = useMemo(()=>columns.map((col, i)=>({
                name: col.accessor,
                key: `${relatedCollection}-${col.accessor}-${i}-${uuid}`,
                Label: accessorToLabel[col.accessor] ?? col.accessor,
                selected: col.active
            })), [
        accessorToLabel,
        columns,
        relatedCollection,
        uuid
    ]);
    const currentColumns = value ?? columns;
    const handleClick = React.useCallback(({ pill })=>{
        const newColumns = currentColumns.map((col)=>col.accessor === pill.name ? {
                ...col,
                active: !col.active
            } : col);
        setValue(newColumns.length ? newColumns : undefined);
    }, [
        currentColumns,
        setValue
    ]);
    if (!relatedCollection) {
        return /*#__PURE__*/ _jsxDEV("div", {
            className: "field-type query-preset-columns-field",
            children: [
                /*#__PURE__*/ _jsxDEV(FieldLabel, {
                    as: "h3",
                    label: label,
                    path: path,
                    required: required
                }, void 0, false, {
                    fileName: "src/elements/QueryPresets/fields/ColumnsField/index.tsx",
                    lineNumber: 91,
                    columnNumber: 9
                }, this),
                /*#__PURE__*/ _jsxDEV("p", {
                    className: "query-preset-columns-field__hint",
                    children: "Select the related collection to configure columns."
                }, void 0, false, {
                    fileName: "src/elements/QueryPresets/fields/ColumnsField/index.tsx",
                    lineNumber: 92,
                    columnNumber: 9
                }, this)
            ]
        }, void 0, true, {
            fileName: "src/elements/QueryPresets/fields/ColumnsField/index.tsx",
            lineNumber: 90,
            columnNumber: 7
        }, this);
    }
    return /*#__PURE__*/ _jsxDEV("div", {
        className: "field-type query-preset-columns-field",
        children: [
            /*#__PURE__*/ _jsxDEV(FieldLabel, {
                as: "h3",
                label: label,
                path: path,
                required: required
            }, void 0, false, {
                fileName: "src/elements/QueryPresets/fields/ColumnsField/index.tsx",
                lineNumber: 101,
                columnNumber: 7
            }, this),
            pills.length > 0 ? /*#__PURE__*/ _jsxDEV(PillSelector, {
                onClick: handleClick,
                pills: pills
            }, void 0, false, {
                fileName: "src/elements/QueryPresets/fields/ColumnsField/index.tsx",
                lineNumber: 103,
                columnNumber: 9
            }, this) : /*#__PURE__*/ _jsxDEV("p", {
                className: "query-preset-columns-field__hint",
                children: "No columns available for this collection."
            }, void 0, false, {
                fileName: "src/elements/QueryPresets/fields/ColumnsField/index.tsx",
                lineNumber: 105,
                columnNumber: 9
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/QueryPresets/fields/ColumnsField/index.tsx",
        lineNumber: 100,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map