import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:queue_client/backend/DataManager.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> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    refresh();
  }

  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),)
                    ],
                  ),
                ),
              ),
              Text("Joined"),
              SizedBox(height: 10,),
              GridView.count(
                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 ServiceCard(
                      tokenId: service['tokenId'],
                      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: service['members']!.split(',').length - 1,
                      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: 50),
              Text("Available"),
              SizedBox(height: 10,),
              ListView.builder(
                  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(
                        tokenId: -1,
                        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: service['members']!.split(',').length - 1,
                    duration: Helpers.ParseDuration(service['duration']));
                  }),
            ],
          ),
        ),
      ),
    );
  }

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

        if(tokenId > 0){return;}

        await Navigator.of(context).push(MaterialPageRoute(
            builder: (context) => ServiceInfoPage(
                  id: id,
                  tokenId: tokenId,
                )));
        setState(() {});
      },
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(10.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Center(
                  child: Text(
                name,
                style: TextStyle(fontSize: 20),
              )),
              SizedBox(height: tokenId > 0 ? 0 : 10,),
              (tokenId > 0) ? Column(
                children: [
                  Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                    Icon(Icons.people_alt_rounded,size: 25,),
                    Text(
                      " $tokenId",
                      style: TextStyle(fontSize: 40),
                    ),
                  ]),
                ],
              )
              : 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: Text("Be there around ${Helpers.DateTimeToRelative(eta)}",maxLines: 3,overflow: TextOverflow.ellipsis,))
                  ]),
              // (sTime.isAfter(DateTime.now()))
              //     ? Row(
              //         mainAxisAlignment: MainAxisAlignment.spaceAround,
              //         children: [
              //             Expanded(flex:1,child: Icon(Icons.access_time)),
              //             Expanded(flex: 4,child: Text("Starts ${Helpers.DateTimeToRelative(sTime)}",maxLines: 3,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 13),))
              //           ])
              //     : Row(
              //         mainAxisAlignment: MainAxisAlignment.spaceAround,
              //         children: [
              //             Expanded(flex:1,child: Icon(Icons.directions_run_outlined)),
              //             Expanded(flex: 4,
              //               child: Text(
              //                   "Ongoing until ${Helpers.DateTimeToRelative(eTime)}"),
              //             )
              //           ]),

              (tokenId <=0) ?
                  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),),
                        ),
                      ),
                    ],
                  ) : Container()

            ],
          ),
        ),
      ),
    );
  }
}