import 'package:aitrainer_app/bloc/customer_exercise_device/customer_exercise_device_bloc.dart';
import 'package:aitrainer_app/localization/app_language.dart';
import 'package:aitrainer_app/model/cache.dart';
import 'package:aitrainer_app/model/exercise_device.dart';
import 'package:aitrainer_app/repository/customer_exercise_device_repository.dart';
import 'package:aitrainer_app/util/trans.dart';
import 'package:aitrainer_app/widgets/app_bar.dart';
import 'package:aitrainer_app/widgets/image_button.dart';
import 'package:aitrainer_app/widgets/splash.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:google_fonts/google_fonts.dart';

// ignore: must_be_immutable
class CustomerExerciseDevicePage extends StatelessWidget with Trans {
  List<Widget> listDevice;

  @override
  Widget build(BuildContext context) {
    setContext(context);
    double cWidth = MediaQuery.of(context).size.width;
    return Scaffold(
        appBar: AppBarNav(depth: 0),
        body: Container(
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('asset/image/WT_black_background.png'),
                fit: BoxFit.cover,
                alignment: Alignment.center,
              ),
            ),
            child: BlocProvider(
                create: (context) =>
                    CustomerExerciseDeviceBloc(repository: CustomerExerciseDeviceRepository(), devices: Cache().getDevices())
                      ..add(CustomerExerciseDeviceLoad()),
                child: BlocConsumer<CustomerExerciseDeviceBloc, CustomerExerciseDeviceState>(
                  listener: (context, state) {
                    if (state is CustomerExerciseDeviceLoading) {
                      return LoadingDialog();
                    } else if (state is CustomerExerciseDeviceError) {
                      Scaffold.of(context).showSnackBar(
                          SnackBar(backgroundColor: Colors.orange, content: Text(state.message, style: TextStyle(color: Colors.white))));
                    }
                  },
                  builder: (context, state) {
                    final bloc = BlocProvider.of<CustomerExerciseDeviceBloc>(context);
                    return getPage(bloc, cWidth);
                  },
                ))));
  }

  Widget getPage(CustomerExerciseDeviceBloc bloc, double cWidth) {
    print("width" + cWidth.toString());
    return CustomScrollView(scrollDirection: Axis.vertical, slivers: [
      SliverGrid(
        delegate: SliverChildListDelegate([
          Text(t("Available Training Places"),
              textAlign: TextAlign.center,
              maxLines: 2,
              softWrap: true,
              style: GoogleFonts.archivoBlack(
                fontSize: 24,
                color: Colors.white,
                shadows: <Shadow>[
                  Shadow(
                    offset: Offset(5.0, 5.0),
                    blurRadius: 12.0,
                    color: Colors.black54,
                  ),
                  Shadow(
                    offset: Offset(-3.0, 3.0),
                    blurRadius: 12.0,
                    color: Colors.black54,
                  ),
                ],
              )),
          Text(t("select your places by tapping"),
              textAlign: TextAlign.center,
              softWrap: true,
              maxLines: 2,
              style: GoogleFonts.archivoBlack(
                fontSize: 14,
                color: Colors.white,
                shadows: <Shadow>[
                  Shadow(
                    offset: Offset(5.0, 5.0),
                    blurRadius: 12.0,
                    color: Colors.black54,
                  ),
                  Shadow(
                    offset: Offset(-3.0, 3.0),
                    blurRadius: 12.0,
                    color: Colors.black54,
                  ),
                ],
              )),
        ]),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 1,
          mainAxisSpacing: 0.0,
          crossAxisSpacing: 0.0,
          childAspectRatio: cWidth > 375 ? 9.1 : 4.1,
        ),
      ),
      SliverGrid(
        delegate: SliverChildListDelegate(getDevicesPlace(bloc, cWidth)),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 1,
          mainAxisSpacing: 15.0,
          crossAxisSpacing: 10.0,
          childAspectRatio: 3.0,
        ),
      ),
      SliverGrid(
        delegate: SliverChildListDelegate([
          SizedBox(
            height: 1,
          ),
          Text(t("Available Equipments"),
              textAlign: TextAlign.center,
              maxLines: 2,
              style: GoogleFonts.archivoBlack(
                fontSize: 24,
                color: Colors.white,
                shadows: <Shadow>[
                  Shadow(
                    offset: Offset(5.0, 5.0),
                    blurRadius: 12.0,
                    color: Colors.black54,
                  ),
                  Shadow(
                    offset: Offset(-3.0, 3.0),
                    blurRadius: 12.0,
                    color: Colors.black54,
                  ),
                ],
              )),
          Text(t("select your equipments by tapping"),
              textAlign: TextAlign.center,
              maxLines: 2,
              style: GoogleFonts.archivoBlack(
                fontSize: 14,
                color: Colors.white,
                shadows: <Shadow>[
                  Shadow(
                    offset: Offset(5.0, 5.0),
                    blurRadius: 12.0,
                    color: Colors.black54,
                  ),
                  Shadow(
                    offset: Offset(-3.0, 3.0),
                    blurRadius: 12.0,
                    color: Colors.black54,
                  ),
                ],
              )),
        ]),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 1,
          mainAxisSpacing: 2.0,
          crossAxisSpacing: 5.0,
          childAspectRatio: cWidth > 375 ? 9.1 : 6.1,
        ),
      ),
      SliverGrid(
        delegate: SliverChildListDelegate(getDevices(bloc)),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 15.0,
          crossAxisSpacing: 15.0,
          childAspectRatio: 1.0,
        ),
      ),
    ]);
  }

  List<Widget> getDevices(CustomerExerciseDeviceBloc bloc) {
    final bool isEnglish = AppLanguage().appLocal.languageCode == "en";
    this.listDevice = List();
    final devices = bloc.devices;
    devices.sort((a, b) => a.sort.compareTo(b.sort));
    if (devices != null) {
      devices.forEach((element) {
        if (element.place == false) {
          final String url = "asset/image/" + element.imageUrl.substring(7);
          ImageButton button = ImageButton(
            width: 178,
            height: 175,
            textAlignment: Alignment.topCenter,
            text: isEnglish ? element.name : element.nameTranslation,
            style: GoogleFonts.archivoBlack(fontSize: 14, color: Colors.white, backgroundColor: Colors.black54.withOpacity(0.4)),
            image: url,
            left: 5,
            onTap: () => changeButtonShape(element, bloc),
            isLocked: false,
            isMarked: bloc.hasCustomerDevice(element.exerciseDeviceId),
            buttonIndex: element.exerciseDeviceId,
            isShape: false,
          );
          listDevice.add(button);
        }
      });
    }
    return listDevice;
  }

  List<Widget> getDevicesPlace(CustomerExerciseDeviceBloc bloc, double cWidth) {
    final bool isEnglish = AppLanguage().appLocal.languageCode == "en";
    this.listDevice = List();
    final devices = bloc.devices;
    if (devices != null) {
      devices.sort((a, b) => a.sort.compareTo(b.sort));
      devices.forEach((element) {
        if (element.place) {
          ImageButton button = ImageButton(
            width: cWidth - 80,
            height: 125,
            top: 10,
            textAlignment: Alignment.topCenter,
            text: isEnglish ? element.name : element.nameTranslation,
            style: GoogleFonts.archivoBlack(fontSize: 14, color: Colors.white, backgroundColor: Colors.black54.withOpacity(0.4)),
            image: element.imageUrl,
            left: 35,
            onTap: () => changeButtonShape(element, bloc),
            isLocked: false,
            buttonIndex: element.exerciseDeviceId,
            isShape: false,
            isMarked: bloc.hasCustomerDevice(element.exerciseDeviceId),
          );
          listDevice.add(button);
        }
      });
    }
    return listDevice;
  }

  void changeButtonShape(ExerciseDevice device, CustomerExerciseDeviceBloc bloc) {
    print("Device clicked: " + device.name);
    if (bloc.hasCustomerDevice(device.exerciseDeviceId)) {
      bloc.add(CustomerExerciseDeviceRemove(device: device));
    } else {
      bloc.add(CustomerExerciseDeviceAdd(device: device));
    }
  }
}