import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2022-2026 GoodData Corporation
import { useCallback, useEffect, useRef } from "react";
import { useIntl } from "react-intl";
import { areObjRefsEqual, insightCreated, insightIsLocked, insightSummary, insightTitle, insightUpdated, insightVisualizationType, } from "@gooddata/sdk-model";
import { useBackendStrict, useWorkspaceStrict } from "@gooddata/sdk-ui";
import { useInsightPagedList } from "@gooddata/sdk-ui-ext";
import { DropdownList, InsightListItem, UiSkeleton } from "@gooddata/sdk-ui-kit";
import { messages } from "../../locales.js";
import { createInsightRequested } from "../../model/events/lab.js";
import { useDashboardSelector } from "../../model/react/DashboardStoreProvider.js";
import { useDashboardEventDispatch } from "../../model/react/useDashboardEventDispatch.js";
import { selectBackendCapabilities } from "../../model/store/backendCapabilities/backendCapabilitiesSelectors.js";
import { selectAllowCreateInsightRequest, selectEnableRichTextDescriptions, selectEnableRichTextDynamicReferences, selectEnableVisualizationFilteringByTags, selectObjectAvailabilityConfig, selectSettings, } from "../../model/store/config/configSelectors.js";
import { selectCanCreateVisualization } from "../../model/store/permissions/permissionsSelectors.js";
import { selectExecutionTimestamp, selectInsightListLastUpdateRequested, } from "../../model/store/ui/uiSelectors.js";
import { selectCurrentUser } from "../../model/store/user/userSelectors.js";
import { getAuthor } from "../../model/utils/author.js";
import { useDashboardComponentsContext } from "../dashboardContexts/DashboardComponentsContext.js";
import { InsightListNoData } from "./InsightListNoData.js";
const ITEM_HEIGHT = 40;
const LIST_WIDTH = 229;
export function getInsightListSourceItem(insight) {
    const insightType = insightVisualizationType(insight);
    return {
        insight,
        insightType,
    };
}
const dropdownTabsTranslationIds = [messages.tabsMy, messages.tabsAll];
const useAuthor = () => {
    const capabilities = useDashboardSelector(selectBackendCapabilities);
    const currentUser = useDashboardSelector(selectCurrentUser);
    return getAuthor(capabilities, currentUser);
};
const tabsIds = { my: messages.tabsMy.id, all: messages.tabsAll.id };
/**
 * @internal
 */
export function InsightList({ height, width = LIST_WIDTH, searchAutofocus, renderItem, selectedRef, onSelect, }) {
    const intl = useIntl();
    const backend = useBackendStrict();
    const workspaceId = useWorkspaceStrict();
    const author = useAuthor();
    const insightListLastUpdateRequested = useDashboardSelector(selectInsightListLastUpdateRequested);
    const canCreateVisualization = useDashboardSelector(selectCanCreateVisualization);
    const allowCreateInsightRequest = useDashboardSelector(selectAllowCreateInsightRequest);
    const settings = useDashboardSelector(selectSettings);
    const useRichText = useDashboardSelector(selectEnableRichTextDescriptions);
    const useReferences = useDashboardSelector(selectEnableRichTextDynamicReferences);
    const executionTimestamp = useDashboardSelector(selectExecutionTimestamp);
    const objectAvailability = useDashboardSelector(selectObjectAvailabilityConfig);
    const isFilteringByTagsEnabled = useDashboardSelector(selectEnableVisualizationFilteringByTags);
    const { LoadingComponent } = useDashboardComponentsContext();
    // Extract tag identifiers from object availability config only when the feature flag is enabled
    const tags = isFilteringByTagsEnabled ? objectAvailability?.includeObjectsWithTags : undefined;
    const excludeTags = isFilteringByTagsEnabled ? objectAvailability?.excludeObjectsWithTags : undefined;
    const { items: insights, totalItemsCount: totalInsightsCount, isLoading, isNextPageLoading, initialLoadCompleted, search, selectedTabId, hasNextPage, skeletonItemsCount, shouldLoadNextPage, loadNextPage, onSearch, onTabSelect, loadInitialItems, resetItems, } = useInsightPagedList({
        backend,
        workspaceId,
        author,
        tabsIds,
        tags,
        excludeTags,
    });
    const prevInsightListLastUpdateRequestedRef = useRef(insightListLastUpdateRequested);
    useEffect(() => {
        loadInitialItems();
    }, [loadInitialItems]);
    useEffect(() => {
        // Only refresh when insightListLastUpdateRequested actually changed
        if (insightListLastUpdateRequested !== prevInsightListLastUpdateRequestedRef.current) {
            resetItems();
        }
        prevInsightListLastUpdateRequestedRef.current = insightListLastUpdateRequested;
    }, [insightListLastUpdateRequested, resetItems]);
    const itemHeightGetter = (index) => {
        // Modify item heights for first/last item so that their hover states don't overlap.
        // Also @see styles and keep this value in sync with what's in css styles
        // for is-first and is-last in visualization items in the list
        const firstLastItemMargin = 10;
        const isFirstOrLast = totalInsightsCount ? index === 0 || index === totalInsightsCount - 1 : false;
        return isFirstOrLast ? ITEM_HEIGHT + firstLastItemMargin : ITEM_HEIGHT;
    };
    const eventDispatch = useDashboardEventDispatch();
    const createInsightRequestedEvent = useCallback((e) => {
        e.preventDefault();
        e.stopPropagation();
        eventDispatch(createInsightRequested());
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    const TABS_AND_SEARCHFIELD_HEIGHT = 70;
    const SEARCHFIELD_HEIGHT = 47;
    // need to subtract height of controls from the overall size which was measured
    const controlsHeight = search ? SEARCHFIELD_HEIGHT : TABS_AND_SEARCHFIELD_HEIGHT;
    const dropdownListHeight = height && height - controlsHeight;
    const dropdownListLoading = isLoading && insights.length === 0;
    const showDropdownListTabs = initialLoadCompleted && !search;
    const showNoDataCreateButton = allowCreateInsightRequest && canCreateVisualization;
    return (_jsx(DropdownList, { width: width, height: dropdownListHeight, isMobile: false, isLoading: dropdownListLoading, showSearch: initialLoadCompleted, searchString: search, searchFieldSize: "small", searchPlaceholder: intl.formatMessage({ id: "search_insights" }), onSearch: onSearch, disableAutofocus: !searchAutofocus, showTabs: showDropdownListTabs, tabs: backend.capabilities.supportsOwners && author ? dropdownTabsTranslationIds : undefined, selectedTabId: selectedTabId, onTabSelect: onTabSelect, itemHeight: ITEM_HEIGHT, itemHeightGetter: itemHeightGetter, items: insights, itemsCount: totalInsightsCount, renderItem: renderItem ??
            (({ item: insight, width }) => {
                if (!insight) {
                    return _jsx(InsightListItem, { isLoading: true });
                }
                const title = insightTitle(insight);
                const description = insightSummary(insight)?.trim();
                const insightListSourceItem = getInsightListSourceItem(insight);
                const isSelected = areObjRefsEqual(insight.insight.ref, selectedRef);
                return (_jsx(InsightListItem, { title: title, description: description, showDescriptionPanel: settings?.enableDescriptions, type: insightListSourceItem.insightType, width: width, isSelected: isSelected, updated: insightUpdated(insightListSourceItem.insight) ??
                        insightCreated(insightListSourceItem.insight), isLocked: insightIsLocked(insightListSourceItem.insight), onClick: () => onSelect?.(insight), metadataTimeZone: settings?.metadataTimeZone, useRichText: useRichText, useReferences: useReferences, richTextExecConfig: {
                        timestamp: executionTimestamp,
                    }, LoadingComponent: LoadingComponent }));
            }), renderNoData: ({ hasNoMatchingData }) => (_jsx(InsightListNoData, { isUserInsights: selectedTabId === messages.tabsMy.id, hasNoMatchingData: hasNoMatchingData, showNoDataCreateButton: showNoDataCreateButton, onCreateButtonClick: createInsightRequestedEvent })), loadNextPage: loadNextPage, hasNextPage: hasNextPage, skeletonItemsCount: skeletonItemsCount, shouldLoadNextPage: shouldLoadNextPage, isNextPageLoading: isNextPageLoading, SkeletonItem: () => (_jsx(UiSkeleton, { itemWidth: ["100%"], direction: "row", itemPadding: 15, itemHeight: 30, itemsCount: 1, itemsGap: 0 })) }));
}
