import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Components/common_loader.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/Screens/Applications/app_configuration_link_screen.dart';
import 'package:manager_app/Screens/Kiosk_devices/device_element.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:manager_api_new/api.dart';
import 'package:provider/provider.dart';

class KioskScreen extends StatefulWidget {
  final ApplicationInstanceDTO applicationInstanceDTO;
  KioskScreen({Key? key, required this.applicationInstanceDTO}) : super(key: key);

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

class _KioskScreenState extends State<KioskScreen> {
  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    Size size = MediaQuery.of(context).size;
    ManagerAppContext managerAppContext = appContext.getContext();
    return Container(
      child: Align(
        alignment: AlignmentDirectional.topCenter,
        child: SingleChildScrollView(
          child: Column(
            children: [
              if(managerAppContext.pinCode != null)
                Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Align(
                    alignment: AlignmentDirectional.centerStart,
                    child: AutoSizeText(
                      "Code pin: " + managerAppContext.pinCode.toString(),
                      style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w300),
                      maxLines: 2,
                      maxFontSize: 25.0,
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              Column(
                children: [
                  Align(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("Tablettes"),
                      )
                  ),
                  FutureBuilder(
                      future: getAppConfigurationLink(appContext, widget.applicationInstanceDTO),
                      builder: (context, AsyncSnapshot<dynamic> snapshot) {

                        List<AppConfigurationLinkDTO>? appConfigurationLinks = snapshot.data;

                        if (snapshot.connectionState == ConnectionState.done && appConfigurationLinks != null) {
                          final screenWidth = MediaQuery.of(context).size.width;
                          final itemWidth = 175;
                          final crossAxisCount = (screenWidth / itemWidth).floor().clamp(1, 6);

                          return GridView.builder(
                              shrinkWrap: true,
                              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: crossAxisCount),
                              itemCount: appConfigurationLinks.length,
                              itemBuilder: (BuildContext context, int index) {
                                return Container(
                                  decoration: boxDecoration(),
                                  padding: const EdgeInsets.all(10),
                                  margin: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                                  child: Align(
                                      alignment: Alignment.center,
                                      child: DeviceElement(deviceDTO: appConfigurationLinks[index].device!, appConfigurationLinkDTO: appConfigurationLinks[index]), //getElement()
                                  ),
                                );
                              }
                          );
                        } else if (snapshot.connectionState == ConnectionState.none || appConfigurationLinks == null) {
                          return Text("No data");
                        } else {
                          return Center(
                              child: Container(
                                  height: size.height * 0.2,
                                  child: CommonLoader()
                              )
                          );
                        }
                      }
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  /*getElement(DeviceDTO device, Size size, dynamic appContext) {
    return Stack(
      children: [
        Positioned(
          top: 10,
          right: 10,
          child: Container(
            width: 15,
            height: 15,
            decoration: BoxDecoration(
              color: device.connected ? Colors.green : Colors.red,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(25.0),
              boxShadow: [
                BoxShadow(
                  color: kSecond,
                  spreadRadius: 0.5,
                  blurRadius: 3,
                  offset: Offset(0, 1.5), // changes position of shadow
                ),
              ],
            ),
          ),
        ),
        Positioned(
          top: 10,
          left: 10,
          child: Row(
            children: [
              AutoSizeText(
                device.name,
                style: new TextStyle(fontSize: 25, fontWeight: FontWeight.w300),
                maxLines: 1,
              ),
              IconButton(
                icon: Icon(Icons.edit),
                onPressed: () {
                  showChangeNameModal(
                      "Nom du device",
                      device.name,
                          (String name) {
                        device.name = name;

                        // Update device main info
                        updateMainInfos(device, appContext);
                        // For refresh
                        setState(() {
                        });
                      },
                      1,
                      context,
                      appContext
                  );
                },
                color: kPrimaryColor,
              )
            ],
          ),
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Align(
              alignment: Alignment.centerLeft,
              child: device.configuration != null ?
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  AutoSizeText(
                    device.configuration,
                    style: new TextStyle(fontSize: 25),
                    maxLines: 1,
                  ),
                  IconButton(
                    icon: Icon(Icons.edit),
                    onPressed: () {
                      showSelectConfigModal(
                          "Sélectionner une configuration",
                            (String configurationId) {

                            device.configurationId = configurationId;
                            // Update device main info
                            updateMainInfos(device, appContext);

                            // For refresh // TODO better refresh
                            /*setState(() {
                            });*/
                          },
                          1,
                          context,
                          appContext
                      );
                    },
                    color: kPrimaryColor,
                  )
                ],
              ) : InkWell(
                onTap: () {
                  showSelectConfigModal(
                    "Sélectionner une configuration",
                    (String configurationId) {

                      device.configurationId = configurationId;
                      // Update device main info
                      updateMainInfos(device, appContext);

                      // For refresh // TODO better refresh
                      /*setState(() {
                      });*/
                    },
                    1,
                    context,
                    appContext
                  );
                },
                child: Container(
                    decoration: BoxDecoration(
                      color: kPrimaryColor,
                      borderRadius: BorderRadius.circular(50),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.only(left: 5, right: 5, top: 15, bottom: 15),
                      child: Center(
                          child: AutoSizeText(
                            "Sélectionner",
                            style: TextStyle(color: kWhite),
                            maxLines: 1,
                          )
                      ),
                    )
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }*/
}

boxDecoration() {
  return BoxDecoration(
    color: kTextLightColor,
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(25.0),
    boxShadow: [
      BoxShadow(
        color: kSecond,
        spreadRadius: 0.5,
        blurRadius: 5,
        offset: Offset(0, 1.5), // changes position of shadow
      ),
    ],
  );
}

Future<List<DeviceDTO>?> getDevices(AppContext appContext) async {
  List<DeviceDTO>? devices = await (appContext.getContext() as ManagerAppContext).clientAPI!.deviceApi!.deviceGet(instanceId: (appContext.getContext() as ManagerAppContext).instanceId);
  //print("number of devices " + devices.length.toString());

  if(devices != null) {
    devices.forEach((element) {
      //print(element);
    });
  }

  return devices;
}