import 'package:flutter/material.dart';
import 'package:manager_app/Components/loading.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/Screens/Devices/device_element.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
import 'package:provider/provider.dart';

class DevicesScreen extends StatefulWidget {
  DevicesScreen({Key key}) : super(key: key);

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

class _DevicesScreenState extends State<DevicesScreen> {
  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    Size size = MediaQuery.of(context).size;

    return Container(
      child: Align(
        alignment: AlignmentDirectional.topCenter,
        child: FutureBuilder(
            future: getDevices(appContext),
            builder: (context, AsyncSnapshot<dynamic> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return GridView.builder(
                    shrinkWrap: true,
                    gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
                    itemCount: snapshot.data.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                        decoration: boxDecoration(),
                        padding: const EdgeInsets.all(15),
                        margin: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                        child: Align(
                            alignment: Alignment.center,
                            child: DeviceElement(deviceDTO: snapshot.data[index]), //getElement()
                        ),
                      );
                    }
                );
              } else if (snapshot.connectionState == ConnectionState.none) {
                return Text("No data");
              } else {
                return Center(
                    child: Container(
                        height: size.height * 0.2,
                        child: Loading()
                    )
                );
              }
            }
        ),
      ),
    );
  }

  /*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,
                          )
                      ),
                    )
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }*/
}

Future<void> updateMainInfos(DeviceDTO deviceToUpdate, dynamic appContext) async {
  ManagerAppContext managerAppContext = appContext.getContext();
  await managerAppContext.clientAPI.deviceApi.deviceUpdateMainInfos(deviceToUpdate);
}

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(dynamic appContext) async {
  List<DeviceDTO> devices = await appContext.getContext().clientAPI.deviceApi.deviceGet();
  print("number of devices " + devices.length.toString());
  devices.forEach((element) {
    print(element);
  });
  return devices;
}