import React, { useState, useEffect, useRef } from 'react';
import classNames from 'classnames';
import { AccordionTabs } from '../../../accordion-tabs';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function TableRowWithExpandableContent({
  handleRowClick = () => {},
  selectedId = null,
  tableHeaderSelector = '.r-thead',
  tableSelector = '.r-table',
  item,
  tabs,
  children,
  forceTabsControl,
  testId,
  disableScrollOnOpen,
  activeTabId,
  onTabSelect = () => {}
}) {
  const getActiveTabIndex = () => tabs.findIndex(t => {
    return activeTabId ? t.id === activeTabId : !t.isVisible || t.isVisible(item);
  });
  const [activeTabIndex, setActiveTabIndex] = useState(getActiveTabIndex());
  const elementRef = useRef(null);
  const isOpened = selectedId === item?.id;
  useEffect(() => {
    if (isOpened && elementRef.current && !disableScrollOnOpen) {
      elementRef.current?.scrollIntoView(true);

      // Subtract `position: sticky` header on tableElem to get correct scrollTop.
      const tableHeader = document.querySelector(tableHeaderSelector);
      const tableElem = document.querySelector(tableSelector);
      if (tableElem && tableHeader) {
        tableElem.scrollTop -= tableHeader.getBoundingClientRect().height;
      }
    }
  }, [selectedId]);
  useEffect(() => {
    const activeTab = getActiveTabIndex();
    setActiveTabIndex(activeTab);
  }, [activeTabId]);
  const SelectedComponent = tabs[activeTabIndex].component;

  // Key of the value passed to the active tab.
  // Defaults to `item` if `[key]` is not provided.
  const key = tabs[activeTabIndex].key || 'item';

  // Assemble item as prop for selectedComponent
  const selectedComponentItem = {
    [key]: {
      ...item
    }
  };
  const shouldShowTabsControl = forceTabsControl || tabs.length > 1;
  const getIsTabShown = function (tab) {
    if (tab.isVisible === undefined) {
      return true;
    }
    if (typeof tab.isVisible === 'function') {
      return tab.isVisible(item);
    }
    return tab.isVisible;
  };
  const preppedTabs = tabs.map(tab => ({
    testId: tab?.id,
    key: tab?.id,
    value: tab?.value,
    isShown: getIsTabShown(tab),
    isDisabled: tab?.isDisabled
  }));
  const handleTabSelected = tabIndex => {
    setActiveTabIndex(tabIndex);
    onTabSelect(tabIndex);
  };
  return /*#__PURE__*/_jsxs("article", {
    className: classNames('r-tr tr-with-expandable-content', {
      open: isOpened
    }, item?.className),
    "test-id": testId,
    children: [/*#__PURE__*/_jsx("div", {
      className: classNames('tr-with-expandable-content-data clickable', {
        open: isOpened
      }),
      role: "button",
      ref: elementRef,
      onClick: () => handleRowClick(item?.id, activeTabIndex),
      children: children
    }), isOpened && /*#__PURE__*/_jsxs("section", {
      className: "sub-panel",
      children: [shouldShowTabsControl && /*#__PURE__*/_jsx(AccordionTabs, {
        tabs: preppedTabs,
        onSelect: (selectedTab, i) => handleTabSelected(i),
        selectedTabKey: preppedTabs[activeTabIndex].key
      }), /*#__PURE__*/_jsx("div", {
        className: "sub-panel-main",
        children: /*#__PURE__*/_jsx(SelectedComponent, {
          ...selectedComponentItem,
          // ERROR: "Property 'viewMore' does not exist on type 'IntrinsicAttributes'.ts(2322)"
          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
          // @ts-ignore
          viewMore: index => handleTabSelected(index),
          tabs: tabs
        })
      })]
    })]
  });
}