import React, { useCallback } from 'react';
import { cn } from '../../utils/classNames';
import {
  useIsMobileSidebarOpen,
  useSetIsMobileSidebarOpen,
} from '../../contexts/UIContext';
import { TARGET_ENV } from '../../constants';
import SidebarContent from './SidebarContent';

const MobileSidebar: React.FC = () => {
  const isMobileSidebarOpen = useIsMobileSidebarOpen();
  const setIsMobileSidebarOpen = useSetIsMobileSidebarOpen();

  const closeSidebar = useCallback(() => {
    setIsMobileSidebarOpen(false);
  }, [setIsMobileSidebarOpen]);

  return (
    <>
      {isMobileSidebarOpen && (
        <div
          className={[
            'fixed z-40 md:hidden bg-black/50',
            TARGET_ENV === 'wordpress'
              ? 'left-0 right-0 bottom-0 top-[var(--actionpanel-ai-admin-bar-h)]'
              : 'inset-0',
          ].join(' ')}
          onClick={closeSidebar}
        />
      )}

      <aside
        className={cn(
          'fixed left-0 z-50 w-[260px] overflow-y-auto border-r border-app-border bg-app-surface transition-transform duration-200 ease-in-out md:hidden',
          TARGET_ENV === 'wordpress'
            ? 'top-[var(--actionpanel-ai-admin-bar-h)] bottom-0'
            : 'top-0 bottom-0',
          isMobileSidebarOpen ? 'translate-x-0' : '-translate-x-full',
        )}
      >
        <SidebarContent onActionComplete={closeSidebar} />
      </aside>
    </>
  );
};

export default React.memo(MobileSidebar);