import { useEffect } from '@wordpress/element';
import { Button } from '@wordpress/components';
import Half3Icon from 'blockbite-icons/dist/Half3';

import ResponsivePanel from '@components/DesignPanel/ResponsivePanel';
import ControlPanel from '@components/DesignPanel/ControlPanel';
import ControlExpandPanel from '@components/DesignPanel/ControlExpandPanel';
import { PanelEditorWrapperProps } from '@components/DesignPanel/types';
import PanelEditorDropdown from '@components/DesignPanel/PanelEditorDropdown';
import PanelBookmarks from '@components/DesignPanel/PanelBookmarks';

export const PanelEditor: React.FC<PanelEditorWrapperProps> = ({
  panels,
  panelId = null,
  setPanelId = null,
  content = null,
  showResponsivePanel = true,
  setCurrentTab = () => {},
}) => {
  const currentCategory = panels.find((p) => p.id === panelId);

  const firstPanelId = panels[0].id;

  useEffect(() => {
    if (!panelId && content?.panel !== 'style') {
      setPanelId(firstPanelId);
    }
  }, []);

  return (
    <>
      <div className="flex items-center gap-2">
        <PanelEditorDropdown
          panels={panels}
          panelId={panelId}
          setPanelId={setPanelId}
          showResponsivePanel={showResponsivePanel}
        />
        <Button
          icon={<Half3Icon width="20" height="20" />}
          label="Current Styles"
          onClick={() => setCurrentTab('current')}
        />
      </div>

      {!panelId && <PanelBookmarks panels={panels} setPanelId={setPanelId} />}

      {currentCategory && showResponsivePanel && <ResponsivePanel />}
      {currentCategory ? (
        currentCategory.expand ? (
          <ControlExpandPanel
            filter={currentCategory?.filter}
            controls={currentCategory.controls}
          />
        ) : (
          <ControlPanel controls={currentCategory.controls} />
        )
      ) : null}
    </>
  );
};

export default PanelEditor;