packages/frontend/lib/features/editor/components/editor_stack.dart

import 'package:jaspr/dom.dart';
import 'package:jaspr/jaspr.dart';

import '../../../utils/provider.dart';
import '../../../utils/styles.dart';
import '../view_models/tabs_view_model.dart';

class EditorStack extends StatelessComponent {
  const EditorStack({super.key});

  @override
  Component build(BuildContext context) {
    final tabsViewModel = context.watch<TabsViewModel>();
    final activeTab = tabsViewModel.activeTab;

    return div(classes: 'editor-stack', [
      for (final tab in tabsViewModel.openTabs)
        div(
          key: ValueKey('slot-${tab.path}'),
          classes: tab == activeTab ? 'editor-tab-slot active' : 'editor-tab-slot',
          [
            tab.build(),
          ],
        ),
    ]);
  }

  @css
  static List<StyleRule> get styles => [
    css('.editor-stack').styles(
      position: const .relative(),
      minHeight: .zero,
      flex: const Flex(grow: 1, basis: .zero),
    ),
    css('.editor-tab-slot').styles(
      position: .absolute(top: 0.px, left: 0.px, right: 0.px, bottom: 0.px),
      opacity: 0,
      pointerEvents: .none,
    ),
    css('.editor-tab-slot.active').styles(
      position: const .relative(),
      height: 100.percent,
      opacity: 1,
      pointerEvents: .auto,
    ),
    css('.editor-container').styles(
      display: .flex,
      height: 100.percent,
      minWidth: .zero,
      overflow: .hidden,
      shadow: .inset(offsetX: .zero, offsetY: 2.px, blur: 4.px, color: const .rgba(0, 0, 0, 0.2)),
      color: colorOnSurface,
      fontFamily: const .list([FontFamilies.courierNew, FontFamilies.monospace]),
      fontSize: 14.px,
      backgroundColor: colorContainer,
    ),
    css('.editor-container .cm-editor').styles(
      position: const .relative(),
      height: 100.percent,
      minWidth: .zero,
      flex: const Flex(grow: 1, basis: .zero),
      backgroundColor: colorContainer,
    ),
    css('.editor-container .cm-gutters').styles(
      backgroundColor: colorContainer,
    ),
    css('.editor-container .cm-scroller').styles(
      raw: {'overscroll-behavior': 'none'},
    ),
  ];
}