import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/Screens/Configurations/configuration_detail_screen.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
import 'package:provider/provider.dart';
import 'package:intl/intl.dart';

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

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

class _ConfigurationsScreenState extends State<ConfigurationsScreen> {
  ConfigurationDTO selectedConfiguration;

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

    ManagerAppContext managerAppContext = appContext.getContext();

    if (managerAppContext.selectedConfiguration != null) {
      return ConfigurationDetailScreen(id: selectedConfiguration.id);
    } else {
      return Container(
        child: Column(
            children: [
              FutureBuilder(
                  future: getConfigurations(appContext),
                  builder: (context, AsyncSnapshot<dynamic> snapshot) {
                    if (snapshot.connectionState == ConnectionState.done) {
                      var tempOutput = new List<ConfigurationDTO>.from(snapshot.data);
                      tempOutput.add(ConfigurationDTO(id: null));
                      return bodyGrid(tempOutput, size, appContext);
                    } else if (snapshot.connectionState == ConnectionState.none) {
                      return Text("No data");
                    } else {
                      return Center(child: Container(height: size.height * 0.2, child: Text('LOADING TODO FRAISE')));
                    }
                  }
              ),
            ]
        ),
      );
    }
  }

  Widget bodyGrid(data, Size size, AppContext appContext)  {
    return GridView.builder(
        shrinkWrap: true,
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 6),
        itemCount: data.length,
        itemBuilder: (BuildContext context, int index) {
          return // User Picture
            InkWell(
              onTap: () {
                  if (data[index].id == null) {
                    print("open modal to create new config !");
                  } else {
                    setState(() {
                      ManagerAppContext managerAppContext = appContext.getContext();
                      managerAppContext.selectedConfiguration = data[index];
                      selectedConfiguration = data[index];
                    });
                  }
              },
              child: Container(
                decoration: boxDecoration(data[index]),
                padding: const EdgeInsets.all(15),
                margin: EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                child: Align(
                  alignment: Alignment.center,
                  child: getElement(data[index], size)
                ),
              ),
            );
        }
    );
  }

  getElement(ConfigurationDTO configuration, Size size) {
    if (configuration.id != null) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Align(
            alignment: Alignment.centerLeft,
            child: AutoSizeText(
              configuration.label,
              style: new TextStyle(fontSize: 25),
              maxLines: 1,
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: AutoSizeText(
              DateFormat('dd/MM/yyyy').format(configuration.dateCreation),
              style: new TextStyle(fontSize: 18, fontFamily: ""),
              maxLines: 1,
            ),
          ),
        ],
      );
    } else {
      return Icon(
        Icons.add,
        color: kTextLightColor,
        size: 100.0,
      );
    }
  }
}

Future<List<ConfigurationDTO>> getConfigurations(dynamic appContext) async {
  List<ConfigurationDTO> configurations = await appContext.getContext().clientAPI.configurationApi.configurationGet();
  print("number of configurations " + configurations.length.toString());
  configurations.forEach((element) {
    print(element);
  });
  return configurations;
}

boxDecoration(ConfigurationDTO configurationDTO) {
  return BoxDecoration(
    color: configurationDTO.id == null ? Colors.lightGreen : 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
      ),
    ],
  );
}


/*Widget bodyTable(data) => DataTable(
      sortColumnIndex: 0,
      sortAscending: true,
      columns: <DataColumn>[
        DataColumn(
          label: Text("Label"),
          onSort: (_, __) {
            setState(() {
             // data.sort((a) => a.label);
            });
          },
        ),
        DataColumn(
          label: Text("Primary color"),
          onSort: (_, __) {
            setState(() {
              /*data.sort((a, b) => a.data["stats"]["dividendYield"]
                  .compareTo(b.data["stats"]["dividendYield"]));*/
            });
          },
        ),
        DataColumn(
          label: Text("Secondary color"),
          onSort: (_, __) {
            setState(() {
              /*data.sort((a, b) => a.data["quote"]["iexBidPrice"]
                  .compareTo(b.data["quote"]["iexBidPrice"]));*/
            });
          },
        ),
        DataColumn(
          label: Text("Languages"),
          onSort: (_, __) {
            setState(() {
              /*data.sort((a, b) => a.data["stats"]["latestPrice"]
                  .compareTo(b.data["stats"]["latestPrice"]));*/
            });
          },
        ),
        DataColumn(
          label: Text("Date creation"),
          onSort: (_, __) {
            setState(() {
              /*data.sort((a, b) => a.data["stats"]["latestPrice"]
                  .compareTo(b.data["stats"]["latestPrice"]));*/
            });
          },
        ),
        DataColumn(
          label: Text("Actions"),
          onSort: (_, __) {
            setState(() {
              /*data.sort((a, b) => a.data["stats"]["latestPrice"]
                  .compareTo(b.data["stats"]["latestPrice"]));*/
            });
          },
        ),
      ],
      rows: data
          .map<DataRow>( (configuration) => DataRow(
          cells: [
            DataCell(
              Text('${configuration.label ?? ""}'),
            ),
            DataCell(
              Text('${configuration.primaryColor ?? ""}'),
            ),
            DataCell(
              Text('${configuration.secondaryColor ?? ""}'),
            ),
            DataCell(
              Text('${configuration.languages ?? ""}'),
            ),
            DataCell(
              Text('${configuration.dateCreation ?? ""}'),
            ),
            DataCell(
              Text("Todo buttons - open = edit, delete"),
            ),
          ],
        ),
      ).toList()
  );*/