import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "core-js/modules/es.array.map.js";
import "core-js/modules/es.function.name.js";
import "core-js/modules/es.object.to-string.js";
import "core-js/modules/esnext.iterator.constructor.js";
import "core-js/modules/esnext.iterator.map.js";
import "core-js/modules/web.timers.js";
import classNames from 'classnames';
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
var registerResizeObserver = function registerResizeObserver(container, rendererWindow, handler) {
  var rafId = 0;
  // @ts-ignore - ResizeObserver 在 renderer window is available
  var resizeObserver = new rendererWindow.ResizeObserver(function () {
    if (rafId) cancelAnimationFrame(rafId);
    rafId = requestAnimationFrame(function () {
      rafId = 0;
      handler();
    });
  });
  resizeObserver.observe(container);
  return function () {
    if (rafId) cancelAnimationFrame(rafId);
    resizeObserver.disconnect();
  };
};

// 这里本来是用了useEffect，但是因为useEffect会在组件渲染后执行，所以会导致组件渲染后，元素尺寸变化不会立即生效
// 所以这里用了useLayoutEffect，确保元素尺寸变化立即生效
var useElementSize = function useElementSize(selector, dependency) {
  var _useState = useState(''),
    _useState2 = _slicedToArray(_useState, 2),
    renderWindowName = _useState2[0],
    setRenderWindowName = _useState2[1];
  var _useState3 = useState({
      left: 0,
      width: 0
    }),
    _useState4 = _slicedToArray(_useState3, 2),
    size = _useState4[0],
    setSize = _useState4[1];
  var containerRef = useRef(null);
  var releaseResizeObserverRef = useRef(null);
  useLayoutEffect(function () {
    var _container$ownerDocum3;
    var container = containerRef.current;
    if (!container) return;
    var updateSize = function updateSize() {
      var el = container.querySelector(selector);
      if ((el === null || el === void 0 ? void 0 : el.clientWidth) > 0) {
        setSize({
          left: el.offsetLeft,
          width: el.clientWidth
        });
      }
    };
    updateSize();
    var updateObserverWithNewRenderWindow = function updateObserverWithNewRenderWindow() {
      var _releaseResizeObserve, _container$ownerDocum, _container$ownerDocum2;
      (_releaseResizeObserve = releaseResizeObserverRef.current) === null || _releaseResizeObserve === void 0 || _releaseResizeObserve.call(releaseResizeObserverRef);
      releaseResizeObserverRef.current = registerResizeObserver(container, (_container$ownerDocum = container === null || container === void 0 || (_container$ownerDocum2 = container.ownerDocument) === null || _container$ownerDocum2 === void 0 ? void 0 : _container$ownerDocum2.defaultView) !== null && _container$ownerDocum !== void 0 ? _container$ownerDocum : window, updateSize);
    };

    // init or dom renderWindow changed, update resizeObserver with current renderWindow
    if (!releaseResizeObserverRef.current || (container === null || container === void 0 || (_container$ownerDocum3 = container.ownerDocument) === null || _container$ownerDocum3 === void 0 || (_container$ownerDocum3 = _container$ownerDocum3.defaultView) === null || _container$ownerDocum3 === void 0 ? void 0 : _container$ownerDocum3.name) !== renderWindowName) {
      var _container$ownerDocum4;
      setRenderWindowName((container === null || container === void 0 || (_container$ownerDocum4 = container.ownerDocument) === null || _container$ownerDocum4 === void 0 || (_container$ownerDocum4 = _container$ownerDocum4.defaultView) === null || _container$ownerDocum4 === void 0 ? void 0 : _container$ownerDocum4.name) || '');
      updateObserverWithNewRenderWindow();
    }
    return function () {
      var _releaseResizeObserve2;
      (_releaseResizeObserve2 = releaseResizeObserverRef.current) === null || _releaseResizeObserve2 === void 0 || _releaseResizeObserve2.call(releaseResizeObserverRef);
    };
  }, [selector, dependency, renderWindowName]);
  useEffect(function () {
    if (isWindows()) {
      var _containerRef$current;
      // dialog renderWindow is not available immediately after dom render, need to retry to get the renderWindow
      var lastView = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || (_containerRef$current = _containerRef$current.ownerDocument) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.defaultView;
      var retryCnt = 0;
      var id = setInterval(function () {
        var _containerRef$current2;
        var newView = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || (_containerRef$current2 = _containerRef$current2.ownerDocument) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.defaultView;
        if (newView !== lastView) {
          lastView = newView;
          setRenderWindowName((newView === null || newView === void 0 ? void 0 : newView.name) || '');
          clearInterval(id);
        }

        // max retry cnt
        if (retryCnt > 3) {
          clearInterval(id);
        }
      }, 50);
      return function () {
        return clearInterval(id);
      };
    }
  }, []);
  return {
    size: size,
    containerRef: containerRef
  };
};
import './index.css';
import { FcrIcon } from '../icon';
import { FcrIconType } from '../icon/type';
import { isWindows } from 'agora-foundation/lib/utilities/env';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export var FcrTabs = function FcrTabs(_ref) {
  var _ref$items = _ref.items,
    items = _ref$items === void 0 ? [] : _ref$items,
    activeKey = _ref.activeKey,
    _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
    variant = _ref.variant;
  // 使用自定义Hook监听元素尺寸变化
  var _useElementSize = useElementSize(".fcr-tabs__nav-item-".concat(activeKey), activeKey),
    indicatorStyle = _useElementSize.size,
    containerRef = _useElementSize.containerRef;
  var cls = classNames('fcr-tabs', {
    'fcr-simple-tabs': variant === 'simple'
  });
  return /*#__PURE__*/_jsx("div", {
    className: cls,
    children: /*#__PURE__*/_jsxs("div", {
      className: "fcr-tabs__nav-list",
      ref: containerRef,
      children: [items.map(function (_ref2) {
        var label = _ref2.label,
          key = _ref2.key;
        var cls = classNames("fcr-tabs__nav-item fcr-tabs__nav-item-".concat(key), {
          'fcr-tabs__nav-item--active': key === activeKey
        });
        var handleClick = function handleClick() {
          onChange(key);
        };
        return /*#__PURE__*/_jsx("div", {
          className: cls,
          onClick: handleClick,
          children: /*#__PURE__*/_jsx("span", {
            className: "fcr-tabs__nav-item-text",
            children: label
          })
        }, key);
      }), /*#__PURE__*/_jsx("div", {
        className: "fcr-tabs__nav-indicator",
        style: indicatorStyle
      })]
    })
  });
};
export var FcrFashionTabs = function FcrFashionTabs(_ref3) {
  var _ref3$items = _ref3.items,
    items = _ref3$items === void 0 ? [] : _ref3$items,
    activeKey = _ref3.activeKey,
    _ref3$onChange = _ref3.onChange,
    onChange = _ref3$onChange === void 0 ? function () {} : _ref3$onChange;
  var size = 40;
  return /*#__PURE__*/_jsx("div", {
    className: "fcr-tabs fcr-fashion-tabs",
    children: /*#__PURE__*/_jsx("div", {
      className: "fcr-tabs__nav-list",
      children: items.map(function (_ref4) {
        var label = _ref4.label,
          key = _ref4.key;
        var isActive = key === activeKey;
        var cls = classNames("fcr-tabs__nav-item fcr-tabs__nav-item-".concat(key), {
          'fcr-tabs__nav-item--active': isActive
        });
        var handleClick = function handleClick() {
          onChange(key);
        };
        return /*#__PURE__*/_jsxs("div", {
          className: cls,
          onClick: handleClick,
          children: [/*#__PURE__*/_jsx("span", {
            className: "fcr-tabs__nav-item-text",
            children: label
          }), isActive && /*#__PURE__*/_jsx("div", {
            className: "fcr-fashion-tabs__nav-indicator",
            style: {
              right: -6,
              width: size,
              height: size,
              top: 0
            },
            children: /*#__PURE__*/_jsx(FcrIcon, {
              type: FcrIconType.FCR_UNDERLINE,
              colors: {
                iconPrimary: 'var(--fcr_ui_scene_icontext1)'
              },
              size: size
            })
          })]
        }, key);
      })
    })
  });
};