import 'package:flutter/material.dart';
import 'package:manager_app/Components/confirmation_dialog.dart';
import 'package:manager_app/Components/fetch_section_icon.dart';
import 'package:manager_app/Components/message_notification.dart';
import 'package:manager_app/Components/multi_select_container.dart';
import 'package:manager_app/Components/multi_string_input_container.dart';
import 'package:manager_app/Components/rounded_button.dart';
import 'package:manager_app/Components/string_input_container.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/client.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
import 'package:provider/provider.dart';
import 'package:intl/intl.dart';

class SectionDetailScreen extends StatefulWidget {
  final String id;
  SectionDetailScreen({Key key, @required this.id}) : super(key: key);

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

class _SectionDetailScreenState extends State<SectionDetailScreen> {
  SectionDTO sectionDTO;

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

    return Container(
      child: FutureBuilder(
          future: getSection(widget.id, appContext.getContext().clientAPI),
          builder: (context, AsyncSnapshot<dynamic> snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              return bodySection(snapshot.data, size, appContext, context);
            } 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 bodySection(SectionDTO sectionDTO, Size size, AppContext appContext, BuildContext context)  {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Align(
                  alignment: AlignmentDirectional.bottomStart,
                  child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text(sectionDTO.label, style: TextStyle(fontSize: 30, fontWeight: FontWeight.w400)),
                            Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Icon(
                                getSectionIcon(sectionDTO.type),
                                color: kPrimaryColor,
                                size: 25,
                              ),
                            )
                          ],
                        ),
                        Padding(
                          padding: const EdgeInsets.all(5.0),
                          child: Text(DateFormat('dd/MM/yyyy').format(sectionDTO.dateCreation), style: TextStyle(fontSize: 15, fontWeight: FontWeight.w200)),
                        ),
                      ],
                    ),
                  )
              ),
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Align(
                  alignment: AlignmentDirectional.centerEnd,
                  child: InkWell(
                      onTap: () {
                        ManagerAppContext managerAppContext = appContext.getContext();
                        managerAppContext.selectedSection = null;
                        appContext.setContext(managerAppContext);
                      },
                      child: Container(
                          child: Icon(
                            Icons.arrow_back,
                            color: kPrimaryColor,
                            size: 50.0,
                          )
                      )
                  ),
                ),
              )
            ],
          ),
        ), // TITLE
        Container(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Container(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Column(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            StringContainer(
                              label: "Nom :",
                              initialValue: sectionDTO.label,
                              onChanged: (value) {
                                sectionDTO.label = value;
                              },
                            ),
                            MultiSelectContainer(
                              label: "Type :",
                              initialValue: [sectionDTO.type.toString()],
                              isMultiple: false,
                              values: section_types,
                              onChanged: (value) {
                                var tempOutput = new List<String>.from(value);
                                sectionDTO.type = SectionType.fromJson(tempOutput[0]);
                              },
                            ),
                            StringContainer(
                              label: "Image :",
                              initialValue: sectionDTO.imageId,
                              onChanged: (value) {
                                sectionDTO.imageId = value;
                              },
                            ),
                          ],
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.spaceAround,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            MultiStringContainer(
                              label: "Titre :",
                              initialValue: sectionDTO.title,
                              onGetResult: (value) {
                                if (sectionDTO.title != value) {
                                  sectionDTO.title = value;
                                  save(true, sectionDTO, appContext);
                                }
                              },
                              maxLines: 1,
                            ),
                            MultiStringContainer(
                              label: "Description :",
                              initialValue: sectionDTO.description,
                              onGetResult: (value) {
                                if (sectionDTO.description != value) {
                                  sectionDTO.description = value;
                                  save(true, sectionDTO, appContext);
                                }
                              },
                              maxLines: 2,
                            )
                          ],
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),// FIELDS SECTION
        getSpecificData(sectionDTO, appContext),
        getButtons(sectionDTO, appContext),
      ],
    );
  }

  getButtons(SectionDTO sectionDTO, AppContext appContext) {
    return Align(
      alignment: AlignmentDirectional.bottomCenter,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: RoundedButton(
              text: "Annuler",
              icon: Icons.undo,
              color: Colors.grey,
              textColor: Colors.white,
              fontSize: 15,
              press: () {
                cancel(sectionDTO, appContext);
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: RoundedButton(
              text: "Supprimer",
              icon: Icons.delete,
              color: kPrimaryColor,
              textColor: Colors.white,
              fontSize: 15,
              press: () {
                delete(sectionDTO, appContext);
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: RoundedButton(
              text: "Sauvegarder",
              icon: Icons.done,
              color: Colors.lightGreen,
              textColor: Colors.white,
              fontSize: 15,
              press: () {
                save(false, sectionDTO, appContext);
              },
            ),
          ),
        ],
      ),
    );
  }

  Future<void> cancel(SectionDTO sectionDTO, AppContext appContext) async {
    ManagerAppContext managerAppContext = appContext.getContext();
    SectionDTO section = await appContext.getContext().clientAPI.sectionApi.sectionGetDetail(sectionDTO.id);
    managerAppContext.selectedSection = section;
    appContext.setContext(managerAppContext);
  }

  Future<void> delete(SectionDTO sectionDTO, AppContext appContext) async {
    showConfirmationDialog(
        "Êtes-vous sûr de vouloir supprimer cette section ?",
            () {},
            () async {
          ManagerAppContext managerAppContext = appContext.getContext();
          await appContext.getContext().clientAPI.sectionApi.sectionDelete(sectionDTO.id);
          managerAppContext.selectedSection = null;
          appContext.setContext(managerAppContext);
        },
        context
    );
  }

  Future<void> save(bool isTraduction, SectionDTO sectionDTO, AppContext appContext) async {
    print("SAVE");
    print(sectionDTO);
    SectionDTO section = await appContext.getContext().clientAPI.sectionApi.sectionUpdate(sectionDTO);
    ManagerAppContext managerAppContext = appContext.getContext();
    managerAppContext.selectedSection = section;
    appContext.setContext(managerAppContext);

    if (isTraduction) {
      showNotification(Colors.green, kWhite, 'Les traductions de la section ont été sauvegardées avec succès', context);
    } else {
      showNotification(Colors.green, kWhite, 'La section a été sauvegardée avec succès', context);
    }
  }

  getSpecificData(SectionDTO sectionDTO, AppContext appContext) {
    switch(sectionDTO.type) {
      case SectionType.map:
        return Text("map");
      case SectionType.slider:
        return Text("slider");
      case SectionType.video:
        return Text("video");
      case SectionType.web:
        return Text("web");
      case SectionType.menu:
        return Text("menu");
    }
  }
}

Future<SectionDTO> getSection(String sectionId, Client client) async {
  SectionDTO section = await client.sectionApi.sectionGetDetail(sectionId);
  print("received section");
  print(section);
  return section;
}