import { _ as _extends } from './extends-dc6a71fd.js';
import { _ as _Object$keys } from './keys-425c8ab0.js';
import { _ as _toConsumableArray } from './toConsumableArray-7b1c0e23.js';
import React, { useRef, useEffect } from 'react';
import './_commonjsHelpers-0c4b6f40.js';
import './core.get-iterator-method-e903ff31.js';
import './_object-pie-133f504a.js';
import './_object-sap-169d6272.js';
import './_iter-detect-f089461c.js';

var sortByName = function sortByName(arr) {
  var items = [].concat(_toConsumableArray(arr));
  items.sort(function (a, b) {
    var nameA = a.name.toUpperCase();
    var nameB = b.name.toUpperCase();
    if (nameA < nameB) {
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }
    return 0;
  });
  return items;
};

var AlphabeticList = function AlphabeticList(_ref) {
  var _ref$dataRecord = _ref.dataRecord,
      dataRecord = _ref$dataRecord === undefined ? [] : _ref$dataRecord;

  var dataList = {};
  if (dataRecord && dataRecord.length > 0) {
    var sortedData = sortByName(dataRecord);
    sortedData.forEach(function (item) {
      var firstLetter = item.name.charAt(0).toUpperCase();
      if (!dataList[firstLetter]) {
        dataList[firstLetter] = [];
      }
      dataList[firstLetter].push(item);
    });
  }

  var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
  var itemsRef = useRef([]);

  var renderAlbhabetList = function renderAlbhabetList() {
    var style = {
      fontWeight: '600',
      fontSize: '30px',
      textDecoration: 'none',
      padding: '0 10px',
      color: 'grey'
    };
    return React.createElement(
      'div',
      { className: 'd-flex flex-wrap mb-3' },
      alphabet.map(function (letter, i) {
        if (dataList[letter]) {
          return React.createElement(
            'a',
            {
              key: i,
              onClick: function onClick() {
                var index = _Object$keys(dataList).findIndex(function (i) {
                  return i === letter;
                });
                if (itemsRef.current && itemsRef.current[index]) {
                  window.scrollTo(0, itemsRef.current[index].offsetTop);
                }
              } },
            React.createElement(
              'span',
              {
                style: _extends({}, style, {
                  color: 'black'
                }) },
              letter
            )
          );
        }
        return React.createElement(
          'span',
          { key: i, style: style },
          letter
        );
      })
    );
  };

  useEffect(function () {
    itemsRef.current = itemsRef.current.slice(0, _Object$keys(dataList).length);
  }, [dataList]);

  return React.createElement(
    React.Fragment,
    null,
    renderAlbhabetList(),
    _Object$keys(dataList).map(function (letter, index) {
      return React.createElement(
        React.Fragment,
        { key: index },
        React.createElement(
          'h3',
          { ref: function ref(el) {
              return itemsRef.current[index] = el;
            } },
          letter
        ),
        React.createElement(
          'ul',
          null,
          dataList[letter].map(function (item, i) {
            return React.createElement(
              'li',
              { key: i },
              React.createElement(
                'a',
                { href: item.url },
                item.name
              )
            );
          })
        )
      );
    })
  );
};

export default AlphabeticList;
