import { SmartTagsSection } from '@/components/Tags/SmartTagsSection';
import { TagsSection } from '@/components/Tags/TagsSection';
import { WebApplication } from '@/ui_models/application';
import { PANEL_NAME_NAVIGATION } from '@/views/constants';
import { ApplicationEvent, PrefKey } from '@standardnotes/snjs';
import { observer } from 'mobx-react-lite';
import { FunctionComponent } from 'preact';
import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
import {
  PanelSide,
  ResizeFinishCallback,
  PanelResizer,
  PanelResizeType,
} from './PanelResizer';

type Props = {
  application: WebApplication;
};

export const Navigation: FunctionComponent<Props> = observer(
  ({ application }) => {
    const appState = useMemo(() => application.getAppState(), [application]);
    const [ref, setRef] = useState<HTMLDivElement | null>();
    const [panelWidth, setPanelWidth] = useState<number>(0);

    useEffect(() => {
      const removeObserver = application.addEventObserver(async () => {
        const width = application.getPreference(PrefKey.TagsPanelWidth);
        if (width) {
          setPanelWidth(width);
        }
      }, ApplicationEvent.PreferencesChanged);

      return () => {
        removeObserver();
      };
    }, [application]);

    const panelResizeFinishCallback: ResizeFinishCallback = useCallback(
      (width, _lastLeft, _isMaxWidth, isCollapsed) => {
        application.setPreference(PrefKey.TagsPanelWidth, width);
        appState.noteTags.reloadTagsContainerMaxWidth();
        appState.panelDidResize(PANEL_NAME_NAVIGATION, isCollapsed);
      },
      [application, appState]
    );

    const panelWidthEventCallback = useCallback(() => {
      appState.noteTags.reloadTagsContainerMaxWidth();
    }, [appState]);

    return (
      <div
        id="navigation"
        className="sn-component section app-column app-column-first"
        data-aria-label="Navigation"
        ref={setRef}
      >
        <div id="navigation-content" className="content">
          <div className="section-title-bar">
            <div className="section-title-bar-header">
              <div className="sk-h3 title">
                <span className="sk-bold">Views</span>
              </div>
            </div>
          </div>
          <div className="scrollable">
            <SmartTagsSection appState={appState} />
            <TagsSection appState={appState} />
          </div>
        </div>
        {ref && (
          <PanelResizer
            collapsable={true}
            defaultWidth={150}
            panel={ref}
            hoverable={true}
            side={PanelSide.Right}
            type={PanelResizeType.WidthOnly}
            resizeFinishCallback={panelResizeFinishCallback}
            widthEventCallback={panelWidthEventCallback}
            width={panelWidth}
            left={0}
          />
        )}
      </div>
    );
  }
);