import React, { ReactNode, useEffect, useRef, useState } from 'react';
import {
  Box,
  SectionHelper,
  SectionHelperProps,
  Table,
} from '@wix/design-system';
import { Fade } from '../Fade';
import { Collapse } from '../Collapse';
import { observer } from 'mobx-react-lite';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { TableTopNotificationState } from './TableTopNotificationState';

export interface TableTopNotificationProps extends Partial<SectionHelperProps> {
  /**
   * After the notification close animation finished
   */
  onAfterClose?: () => unknown;
  /**
   * After the notification open animation finished
   */
  onAfterOpen?: () => unknown;

  /** hide the notification when search is applied.
   * @default false
   */
  hideOnSearch?: boolean;

  children?: ReactNode;
}

function _TableTopNotification(props: TableTopNotificationProps) {
  const {
    onClose,
    showCloseButton = !!onClose,
    onAfterClose,
    onAfterOpen,
    hideOnSearch,
    children,
    appearance = 'standard',
    ...rest
  } = props;

  const toolbarCollectionState = useToolbarCollectionContext();

  const { collection, totalStickyContentHeight } = toolbarCollectionState;

  const {
    _topNotification: topNotification,
    query: { search },
  } = collection;

  const [state] = useState(
    () =>
      new TableTopNotificationState({
        topNotification,
        getStickyContentHeight: () =>
          toolbarCollectionState.totalStickyContentHeight,
        reportBI: toolbarCollectionState.reportBi,
      }),
  );

  const targetRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => state.init(), []);

  const { position } = state;
  const { data: text, show } = topNotification;

  let child;

  if (hideOnSearch && !search.isEmpty) {
    child = null;
  } else {
    child = (
      <Collapse
        timeout={300}
        state={topNotification}
        onEntered={onAfterOpen}
        style={{
          flexShrink: 0,
          ...(position === 'sticky' &&
            totalStickyContentHeight != null && {
              position: 'sticky',
              top: totalStickyContentHeight,
              zIndex: 1100,
            }),
          width: '100%',
        }}
      >
        <Table.SubToolbar>
          <Fade timeout={300} in={show} unmountOnExit>
            <Box paddingTop="15px" paddingBottom="15px">
              <SectionHelper
                {...rest}
                dataHook="table-top-notification"
                showCloseButton={showCloseButton}
                onClose={(e) => {
                  topNotification.clickClose(onAfterClose);
                  onClose?.(e);
                }}
                appearance={appearance}
              >
                {text}
                {children}
              </SectionHelper>
            </Box>
          </Fade>
        </Table.SubToolbar>
      </Collapse>
    );
  }

  return (
    <>
      {child}
      <div
        ref={(el) => {
          targetRef.current = el;
        }}
      />
    </>
  );
}

export const TableTopNotification = observer(_TableTopNotification);
TableTopNotification.displayName = 'TableTopNotification';