import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:queue_client/backend/DataManager.dart';
import 'package:queue_client/backend/Dialogs.dart';
import 'package:queue_client/service_info.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  Timer timer = Timer(Duration(hours: 1), () { });

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    timer = Timer.periodic(const Duration(seconds: 30), (timer) {
      refresh();
    });

    refreshInit();
  }

  void refreshInit() async{
    // Dialogs.waiting(context);
    await DataManager.instance().GetData();
    // Dialogs.hide(context);
    setState(() {});
  }

  @override
  void dispose() {
    // TODO: implement dispose
    timer.cancel();
    super.dispose();
  }

  void refresh() async {
    await DataManager.instance().GetData();

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
                "${DataManager.instance().JoinedServices.length} Pending Queues",style: TextStyle(fontSize: 18),),
            Row(
              children: [
                Icon(Icons.person_2_rounded),
                Text("  ${DataManager.instance().Username} ",style: TextStyle(fontSize: 18)),
              ],
            ),
          ],
        ),
      ),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Card(
              //   child: Padding(
              //     padding: const EdgeInsets.all(8.0),
              //     child: Column(
              //       children: [
              //         Row(
              //           mainAxisAlignment: MainAxisAlignment.center,
              //           children: [
              //             Icon(Icons.token),
              //             Text("  Your Token ID")
              //           ],
              //         ),
              //         Text(DataManager.instance().userId.toString(),style: TextStyle(fontSize: 45),)
              //       ],
              //     ),
              //   ),
              // ),
              // SizedBox(height: 30,),

              Text("Joined"),
              SizedBox(height: 10,),
              GridView.count(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                crossAxisCount: context.isSmall ? 1 : ( context.isTablet ? 4: 2),
                children: List.generate(
                    DataManager.instance().JoinedServices.length, (index) {
                  Map<String, dynamic> service =
                      (DataManager.instance().JoinedServices[index]);
                  return JoinedCard(
                      appointmentId: int.parse(service['appointment_id']),
                      id: int.parse(service['service_id']),
                      sTime: DateTime.parse(
                          service['start_time'] ?? DateTime.now().toString()),
                      name: service['name']!,
                      queueIndex: int.parse(service['member_pos']),
                      duration: Helpers.ParseDuration(service['duration'])
                  );
                }),
              ),
              // ListView.builder(
              //     shrinkWrap: true,
              //     itemCount: DataManager.instance().JoinedServices.length,
              //     itemBuilder: (context, index){
              //       // Map<String,dynamic> service=  jsonDecode(DataManager.instance().services[index]);
              //       Map<String,dynamic> service= DataManager.instance().JoinedServices[index];
              //       return ServiceCard(tokenId:service['tokenId'],id: int.parse(service['id']),sTime: DateTime.parse(service['start_time'] ?? DateTime.now().toString()), name: service['name']!, memberCount: service['members']!.split(',').length-1);
              //     }),
              SizedBox(height: 20),
              Text("Available"),
              SizedBox(height: 10,),
              ListView.builder(
                  physics: NeverScrollableScrollPhysics(),

                  shrinkWrap: true,
                  itemCount: DataManager.instance().AvailableServices.length,
                  itemBuilder: (context, index) {
                    // Map<String,dynamic> service=  jsonDecode(DataManager.instance().services[index]);
                    Map<String, dynamic> service =
                        DataManager.instance().AvailableServices[index];
                    return ServiceCard(
                        id: int.parse(service['id']),
                        sTime: DateTime.parse(
                            service['start_time'] ?? DateTime.now().toString()),
                        eTime: DateTime.parse(
                            service['end_time'] ?? DateTime.now().toString()),
                        name: service['name']!,
                        memberCount: int.parse(service['member_count']),
                    duration: Helpers.ParseDuration(service['duration']));
                  }),
            ],
          ),
        ),
      ),
    );
  }

  Widget ServiceCard(
      {required int id,
      required DateTime sTime,
      required DateTime eTime,
      required String name,
      required int memberCount,
      required Duration duration}) {
    
    
    DateTime eta = sTime.add(duration * memberCount);
    
    return InkWell(
      onTap: () async {

        bool confirmed = await Dialogs.AskQuestion(context, "Confirm", "Are you sure to join to this Queue?\n\nQueue Name : ${name}");
        if(confirmed){
          Dialogs.waiting(context);
          await DataManager.instance().JoinService(id);
          Dialogs.hide(context);
        }
        setState(() {});
      },
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    name,
                    style: TextStyle(fontSize: 20),
                  ),
                  Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                    Icon(Icons.people_alt_rounded,size: 25,),
                    Text(
                      " ${memberCount}",
                      style: TextStyle(fontSize: 25),
                    ),
                  ])
                ],
              ),
              SizedBox(height:  10,),
              Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Expanded(flex:1,child: Icon(Icons.people)),
                    Expanded(flex: 4,child: Text("$memberCount in queue",maxLines: 3,overflow: TextOverflow.ellipsis,))
                  ]),
              Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Expanded(flex:1,child: Icon(Icons.access_time)),
                    Expanded(flex: 4,child:
                      eta.isBefore(DateTime.now()) ? Text("Available right now !") : Text("Be there around ${Helpers.DateTimeToRelative(eta)}",maxLines: 3,overflow: TextOverflow.ellipsis,)
                    )
                  ]),



                  Column(
                    children: [
                      SizedBox(height: 10,),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Center(
                          child: Text("Tap to join the queue",style: TextStyle(fontSize: 12,color: Colors.grey),),
                        ),
                      ),
                    ],
                  )
            ],
          ),
        ),
      ),
    );
  }

  Widget JoinedCard(
      {required int id,
        required DateTime sTime,
        required String name,
        required int queueIndex,
        required int appointmentId,
        required Duration duration}) {

    DateTime eta = sTime.add(duration * appointmentId);

    return Card(
      child: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  name,
                  style: TextStyle(fontSize: 20),
                ),
                Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                  Icon(Icons.people_alt_rounded,size: 25,),
                  Text(
                    " ${queueIndex-1}",
                    style: TextStyle(fontSize: 25),
                  ),
                ])
              ],
            ),
             Column(
              children: [
                Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                  Icon(Icons.token,size: 25,),
                  Text(
                    " ${appointmentId}",
                    style: TextStyle(fontSize: 40),
                  ),
                ]),
              ],
            ),
            Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Expanded(flex:1,child: Icon(Icons.access_time)),
                  Expanded(flex: 4,child:
                  eta.isBefore(DateTime.now()) ? Text("You're late !") : Text("Be there around ${Helpers.DateTimeToRelative(eta)}",maxLines: 3,overflow: TextOverflow.ellipsis,)
                  )
                ]),
          ],
        ),
      ),
    );
  }
}