import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';

import 'package:Grounded/Grounded/about/internal/application/TextType.dart';
import 'package:Grounded/Grounded/designs/Responsive.dart';
import 'package:Grounded/Grounded/designs/Shell.dart';
import 'package:Grounded/Grounded/designs/text/Text.dart';
import 'package:Grounded/Grounded/utils/Colors.dart';

import 'Connect{{screen}}.dart';
import '{{screen}}.dart';
import 'View{{screen}}.dart';

class {{screen}}State extends State<{{screen}}> implements Connect{{screen}} {
  View{{screen}}? _model;

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<View{{screen}}>.reactive(
      viewModelBuilder: () => View{{screen}}(context, this),
      onViewModelReady: (viewModel) {
        _model = viewModel;
        _initiate();
      },
      builder: (context, viewModel, child) => LayoutBuilder(
        builder: (BuildContext context, BoxConstraints viewportConstraints) {
          return Responsive(
            mobile: _mobileView(viewportConstraints),
            tablet: _tabletView(viewportConstraints),
            desktop: _desktopView(viewportConstraints),
          );
        },
      ),
    );
  }

  void _initiate() {
    // Load initial data through _model here; push results back via the
    // Connect{{screen}} callbacks below.
  }

  void _onBack() {
    Navigator.pop(context);
  }

  Widget _mobileView(BoxConstraints viewportConstraints) {
    return Sheet(
      eyebrow: "Grounded",
      title: "{{screen}}",
      onBack: _onBack,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        children: [
          displayTitle("{{screen}}"),
          const SizedBox(height: 14),
          text(
            "Replace this with the screen content.",
            14,
            TextType.Regular,
            color: colorGrey2,
            height: 1.55,
          ),
        ],
      ),
    );
  }

  Widget _tabletView(BoxConstraints viewportConstraints) {
    return _mobileView(viewportConstraints);
  }

  Widget _desktopView(BoxConstraints viewportConstraints) {
    return _mobileView(viewportConstraints);
  }
}
