import { Children, cloneElement, useEffect, useMemo, useRef } from 'react';
import styles from './styles/rt-slide-panel.module.css';
import { RvTabs } from './plugins/rv-tabs';
import { RtSlidePanelProps } from './rt-slide-panel.types';
import cn from 'classnames';
import { RtFrame } from '@dpa/react-frame-intro';
import { useRtBaseProps } from '@dpa/react-hoc';

const wrapperClass = styles['rt-slide-panel-wrapper'];
const contentClass = styles['rt-slide-panel-content'];
const slidePanelClass = styles['rt-slide-panel'];
const elementClass = styles['rt-slide-panel-element'];

export const RtSlidePanel = ({
  direction = 'horizontal',
  interactionOnHover = false,
  activeId,
  children,
  wrapperClassName,
  slidePanelClassName,
  use,
  onActiveChange,
  isResettable,
  ...props
}: RtSlidePanelProps) => {
  const wrapperRef = useRef<HTMLDivElement>(null);
  const ReevoTabs = useRef<RvTabs>();

  useEffect(() => {
    if (wrapperRef.current) {
      if (ReevoTabs.current) ReevoTabs.current.destroy();

      ReevoTabs.current = new RvTabs(wrapperRef.current, {
        activeId,
        contentClass,
        slidePanelClass,
        elementClass,
        interactionOnHover,
        direction,
        isResettable,
      });

      if (onActiveChange)
        ReevoTabs.current.on('activeIdChange', onActiveChange);
    }
    return () => {
      if (ReevoTabs.current) ReevoTabs.current.destroy();
    };
  }, []);

  useEffect(() => {
    if (ReevoTabs.current) {
      const newProps = { activeId, interactionOnHover, direction };
      Object.entries(newProps).map(([key, value]) => {
        if (ReevoTabs.current![key as keyof RvTabs] !== value)
          (ReevoTabs.current as any)[key] = value;
      });
    }
  }, [activeId, interactionOnHover, direction]);

  const processedChildren = useMemo(
    () =>
      Children.map(children, (child) => {
        if (child && typeof child === 'object' && 'props' in child) {
          return cloneElement(child, {
            className: `${child.props.className || ''} ${elementClass}`,
            'data-reevo-id': child.key,
          });
        }
        return child;
      }),
    [children]
  );

  const { 'data-size-scheme': dataSizeScheme, ...baseProps } = useRtBaseProps(
    props,
    '0.2.2'
  );

  return (
    <RtFrame
      isFontSizeProvider
      ref={wrapperRef}
      className={cn(wrapperClass)}
      {...baseProps}
    >
      <div
        className={cn(
          contentClass,
          styles[`rt-slide-panel-content-${direction}`],
          wrapperClassName
        )}
      >
        <RtFrame
          as="div"
          use={use}
          surface="control"
          modifier="base"
          className={cn(
            slidePanelClass,
            styles[`rt-slide-panel-${direction}`],
            slidePanelClassName
          )}
          data-size-scheme={dataSizeScheme}
        />

        {processedChildren}
      </div>
    </RtFrame>
  );
};

RtSlidePanel.displayName = 'RtSlidePanel';