/**
 * amis-ui v6.14.0-beta.1
 * Copyright 2018-2025 fex
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var __react_jsx__ = require('react');
var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
(__react_jsx__["default"] || __react_jsx__).Fragment;
var AlphabetIndexer = function (_a) {
    var items = _a.items, getItemLetter = _a.getItemLetter, onLetterClick = _a.onLetterClick, cx = _a.classnames, currentLetter = _a.currentLetter;
    var containerRef = React.useRef(null);
    var letters = React__default["default"].useMemo(function () {
        return Array.from(new Set(items
            .map(function (item) {
            var value = getItemLetter(item);
            return typeof value === 'string'
                ? value.charAt(0).toUpperCase()
                : '';
        })
            .filter(Boolean)
            .sort()));
    }, [items, getItemLetter]);
    var handleTouchMove = function (e) {
        e.preventDefault();
        var touch = e.touches[0];
        var target = document.elementFromPoint(touch.clientX, touch.clientY);
        var letter = target === null || target === void 0 ? void 0 : target.getAttribute('data-letter');
        if (letter) {
            onLetterClick(letter);
        }
    };
    React.useEffect(function () {
        var container = containerRef.current;
        if (container) {
            container.addEventListener('touchmove', handleTouchMove, {
                passive: false
            });
            return function () {
                container.removeEventListener('touchmove', handleTouchMove);
            };
        }
        return function () { };
    }, []);
    return (_J$X_("div", { ref: containerRef, className: cx('AlphabetIndexer') }, letters.map(function (letter) { return (_J$X_("div", { key: letter, className: cx('AlphabetIndexer-letter', {
            'is-active': letter === currentLetter
        }), "data-letter": letter, onClick: function () { return onLetterClick(letter); } }, letter)); })));
};

exports["default"] = AlphabetIndexer;
