import 'package:ac_web/Pages/AgentAvailabilities.dart';
import 'package:ac_web/Pages/LatestReports.dart';
import 'package:ac_web/Pages/Reports.dart';
import 'package:ac_web/Widgets/LatestReportHeader.dart';
import 'package:flutter/material.dart';

/// Main screen for wide windows.
///
/// Instead of switching between the three pages through a navigation bar like
/// the `MobileView` does, all of them are shown next to each other:
/// reports on the left, the latest reports in the center and the agents on
/// the right.
class DesktopView extends StatelessWidget {
  const DesktopView({super.key});

  /// Breakpoint at which this layout is wide enough to be useful.
  static const double minimumWidth = 900;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("AC Control"),
      ),
      body: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[

          // Reports grouped by their type
          _buildColumn(flex: 2, child: const Reports()),

          const VerticalDivider(width: 1, thickness: 1),

          // The newest reports of every type
          _buildColumn(flex: 3, child: LatestReports()),

          const VerticalDivider(width: 1, thickness: 1),

          // Agents and their current availability
          _buildColumn(
            flex: 2,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                // The other two columns draw their headline themselves.
                Padding(
                  padding: EdgeInsetsGeometry.fromLTRB(8, 8, 8, 0),
                  child: LatestReportHeader(text: "Agents", bigHeader: true),
                ),
                const Expanded(child: AgentAvailabilities()),
              ],
            ),
          ),
        ],
      ),
    );
  }

  /// One column of the layout. Every column scrolls on its own.
  Widget _buildColumn({required int flex, required Widget child}) {
    return Expanded(
      flex: flex,
      child: Padding(
        padding: EdgeInsetsGeometry.all(8),
        child: child,
      ),
    );
  }
}