import 'dart:io';

import 'package:flutter/material.dart';
import 'package:ju_rc_app/boxes/compass.dart';
import 'package:ju_rc_app/boxes/console.dart';
import 'package:ju_rc_app/boxes/maps.dart';
import 'package:ju_rc_app/boxes/state.dart';
import 'package:ju_rc_app/connector.dart';
import 'package:ju_rc_app/lib/boxes.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JuRcApp',
      themeMode: ThemeMode.system,
      theme: ThemeData(
        //colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        brightness: Brightness.light,
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        //colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        brightness: Brightness.dark,
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'App for juRc'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ConnectionBar conBar = ConnectionBar();

  static List<JuBox> boxes = [
    const ControllerState(),
    const Maps(),
    const Compass(),
    const SerialBox(),
  ];

  @override
  void initState() {
    super.initState();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(
          widget.title,
          style: const TextStyle(
            fontSize: 16,
          ),
        ),
        toolbarHeight: 40,
      ),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: conBar,
          ),
          SliverPadding(
              padding: const EdgeInsets.all(10.0),
              sliver: SliverGrid.extent(
                maxCrossAxisExtent:
                    Platform.isAndroid || Platform.isIOS ? 300.0 : 600.0,
                crossAxisSpacing: 10.0,
                mainAxisSpacing: 10.0,
                children: boxes
                    .map((b) => Container(
                          decoration: BoxDecoration(
                            border: Border.all(
                                width: 0,
                                color: const Color.fromARGB(0, 0, 0, 0)),
                            borderRadius: BorderRadius.circular(20.0),
                            color: Theme.of(context)
                                .colorScheme
                                .secondaryContainer,
                          ),
                          padding: const EdgeInsets.all(0.3 * 2 * 20),
                          child: b,
                        ))
                    .toList(),
              )),
        ],
      ),
    );
  }
}