import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:webview_flutter/webview_flutter.dart';

import 'BottomNavBar.dart';
import 'generated/l10n.dart';

class HomePage extends StatefulWidget {
  final String email;

  HomePage({required this.email});

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late WebViewController _webViewController;

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

  @override
  Widget build(BuildContext context) {
    return PopScope(
      child: Scaffold(
        body: Center(
          child: Column(
            children: [
              Container(
                  height: 100,
                  // APPBar height
                  color: Color(0xFFF5E3C3),
                  width: double.infinity,
                  padding: EdgeInsets.all(10.0),
                  child: Stack(children: [
                    Container(
                      padding: EdgeInsets.only(
                        left: MediaQuery.of(context).size.width,
                        top: MediaQuery.of(context).size.height / 2,
                      ),
                      child: Icon(Icons.settings, size: 48, color: Colors.orange),
                    ),
                    Center(
                      child: Text(
                        '全方位照護守護者',
                        style: TextStyle(fontSize: 24, height: 5),
                      ),
                    ),
                  ])),
              Container(
                color: Color(0xFFFFF0E0),
                margin: EdgeInsets.only(top: 5),
                padding: EdgeInsets.all(16),
                child: Column(
                  children: [
                    Container(
                      height: 240,
                      width: double.infinity,
                      // TODO: 如果用http需要分別設定ios, android權限
                      child: WebViewWidget(
                        controller: WebViewController()
                          ..setJavaScriptMode(JavaScriptMode.unrestricted)
                          ..setNavigationDelegate(
                            NavigationDelegate(
                              onProgress: (int progress) {
                                // Update loading bar.
                              },
                              onPageStarted: (String url) {},
                              onPageFinished: (String url) {},
                              onHttpError: (HttpResponseError error) {
                                print("httpError");
                              },
                              onWebResourceError: (WebResourceError error) {
                                print("httpResourceError");
                                print(error.description);
                              },
                              onNavigationRequest: (NavigationRequest request) {
                                if (request.url.startsWith(
                                    'https://streamer.comprehensive-guardian.systems/video_feed')) {
                                  return NavigationDecision.prevent;
                                }
                                return NavigationDecision.navigate;
                              },
                            ),
                          )
                          ..loadRequest(Uri.parse('https://streamer.comprehensive-guardian.systems/0')),
                      ),
                    ),
                    Text(
                      S.of(context).realtime_video,
                      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                    ),
                  ],
                ),
              ),
              Expanded(
                child: GridView.count(
                  crossAxisCount: 2,
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  padding: EdgeInsets.all(16),
                  children: [
                    _buildGridItem(Icons.history_edu, S.of(context).fall_record, context),
                    _buildGridItem(Icons.lightbulb_outline, S.of(context).additional_information, context),
                    _buildGridItem(Icons.monitor_outlined, S.of(context).switch_camera, context),
                    _buildGridItem(Icons.person_sharp, S.of(context).personal_information, context),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
      canPop: false,
    );
  }

  Widget _buildGridItem(IconData icon, String label, BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      color: Colors.white,
      child: InkWell(
        onTap: () {
          if (label == S.of(context).fall_record) {
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => BottomNavBar(
                        email: widget.email,
                        initTabIndex: 1,
                      )),
            );
          } else if (label == S.of(context).additional_information) {
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => BottomNavBar(
                        email: widget.email,
                        initTabIndex: 2,
                      )),
            );
          } else if (label == S.of(context).switch_camera) {
            Navigator.push(
              context,
              MaterialPageRoute
                (builder: (context) => BottomNavBar(
                email: widget.email,
                initTabIndex: 3,
              )),
            );
          } else if (label == S.of(context).personal_information) {
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => BottomNavBar(
                        email: widget.email,
                        initTabIndex: 4,
                      )),
            );
          }
        },
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(icon, size: 48, color: Colors.orange),
              SizedBox(height: 8),
              Text(label, style: TextStyle(fontSize: 16)),
            ],
          ),
        ),
      ),
    );
  }
}