packages/frontend/lib/features/editor/views/editor_container.dart

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

import '../../../utils/provider.dart';
import '../../../utils/styles.dart';
import '../../bottompanel/views/bottom_panel.dart';
import '../../bottompanel/views/p2p_status_bar.dart';
import '../../project/view_models/panels_view_model.dart';
import '../../shared/components/split_panel.dart';
import '../components/editor_stack.dart';
import '../components/editor_tabs.dart';

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

  @override
  Component build(BuildContext context) {
    final panelsViewModel = context.watch<PanelsViewModel>();
    return div(classes: 'editor-wrapper', [
      SplitPanel(
        isVertical: true,
        absoluteFirst: false,
        useRatio: false,
        initialValue: 212,
        minValue: 120,
        maxValue: 480,
        left: const div(classes: 'editor-main-area', [
          EditorTabs(),
          EditorStack(),
        ]),
        right: const BottomPanel(),
        showRight: panelsViewModel.showConsole || panelsViewModel.showProblems,
      ),
      const P2pStatusBar(),
    ]);
  }

  @css
  static List<StyleRule> get styles => [
    css('.editor-wrapper').styles(
      display: .flex,
      minWidth: .zero,
      minHeight: .zero,
      overflow: .hidden,
      flexDirection: .column,
      flex: const Flex(grow: 1, basis: .zero),
    ),
    css('.editor-main-area').styles(
      display: .flex,
      minHeight: .zero,
      flexDirection: .column,
      flex: const Flex(grow: 1, basis: .zero),
    ),
    css('.editor-wrapper .editor-controls').styles(
      display: .flex,
      flexWrap: .wrap,
      gap: .all(10.px),
      flex: const .shrink(0),
    ),
    css('.editor-wrapper .editor-controls > *').styles(
      margin: .only(top: 0.px),
    ),
    css('.editor-wrapper .editor-tabs').styles(
      display: .flex,
      minHeight: 36.px,
      border: .only(
        bottom: .solid(color: Colors.transparent, width: 0.px),
      ),
      overflow: const .only(x: .auto, y: .hidden),
      alignItems: .stretch,
      flex: const .shrink(0),
      backgroundColor: colorContainerLow,
    ),
  ];
}