import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:sendtrain/classes/activity_action.dart';
import 'package:sendtrain/classes/media.dart';
import 'package:sendtrain/models/activity_model.dart';
import 'package:sendtrain/models/activity_timer_model.dart';
import 'package:sendtrain/widgets/activity_action_view.dart';
import 'package:sendtrain/widgets/media_card.dart';

class ActivityView extends StatefulWidget {
  const ActivityView({super.key, required this.activity});
  final ActivityModel activity;

  @override
  State<ActivityView> createState() => _ActivityViewState();
}

class _ActivityViewState extends State<ActivityView> {
  @override
  Widget build(BuildContext context) {
    ActivityModel activity = widget.activity;
    ActivityTimerModel atm =
        Provider.of<ActivityTimerModel>(context, listen: false);

    atm.setup(activity);

    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      AppBar(
        // surfaceTintColor: ThemeData.dark(useMaterial3: true).colorScheme.primary,
        // backgroundColor: ThemeData.dark(useMaterial3: true).colorScheme.primaryContainer,
        centerTitle: true,
        title: const Text('Activity', style: TextStyle(fontSize: 15)),
      ),
      Padding(
          padding:
              const EdgeInsets.only(left: 15, right: 20, top: 15, bottom: 10),
          child: Text(
              maxLines: 1,
              style: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
              activity.title)),
      ActivityViewCategories(categories: activity.categories),
      Padding(
          padding:
              const EdgeInsets.only(top: 0, bottom: 20, left: 15, right: 15),
          child: Text(
              textAlign: TextAlign.left,
              style: const TextStyle(fontSize: 15),
              activity.description)),
      ActivityViewMedia(activity: activity),
      const Padding(
          padding: EdgeInsets.fromLTRB(15, 30, 0, 10),
          child: Text(
              textAlign: TextAlign.left,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              'Actions:')),
      Padding(
        padding: const EdgeInsets.only(left: 10, right: 10),
        child: Card(
          clipBehavior: Clip.antiAlias,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
          ),
          color: Theme.of(context).colorScheme.onPrimary,
          child: Padding(
            padding: const EdgeInsets.only(left: 0, right: 0),
            child: Row(children: [
            // LinearProgressIndicator(
            //   value: 0.5,
            //   minHeight: 100,
            //   color: Theme.of(context).colorScheme.error,
            //   semanticsLabel: 'Linear progress indicator',
            // ),
            // Expanded(
            //     flex: 1,
            //     child: Flex(direction: Axis.horizontal, children: [
            //       Consumer<ActivityTimerModel>(builder: (context, atm, child) {
            //         return IconButton(
            //             iconSize: 30,
            //             icon: atm.isActive()
            //                 ? const Icon(Icons.pause_rounded)
            //                 : const Icon(Icons.play_arrow_rounded),
            //             onPressed: () =>
            //                 {atm.isActive() ? atm.pause : atm.start()});
            //       }),
            //       // IconButton(
            //       //     // iconSize: 36,
            //       //     icon: const Icon(Icons.skip_next_rounded),
            //       //     onPressed: () {
            //       //       atm.nextAction('manual');
            //       //     })
            //     ])),
            Ink(
              width: 70,
              color: Theme.of(context).colorScheme.primaryContainer,
              child: Consumer<ActivityTimerModel>(
                  builder: (context, atm, child) {
                    return IconButton(
                alignment: AlignmentDirectional.center,
                iconSize: 30,
                icon: atm.isActive
                    ? const Icon(Icons.pause_rounded)
                    : const Icon(Icons.play_arrow_rounded),
                onPressed: () =>
                    {atm.isActive ? atm.pause : atm.start()});
                  },
                )),
            Expanded(
                flex: 2,
                child: Consumer<ActivityTimerModel>(
                  builder: (context, atm, child) {
                    return Text(
                        style: const TextStyle(fontSize: 20),
                        textAlign: TextAlign.right,
                        '${atm.actionCount} ${atm.currentAction['type']}');
                  },
                )),
            Expanded(
                flex: 1,
                child: Padding(
                    padding: const EdgeInsets.only(right: 15),
                    child: Consumer<ActivityTimerModel>(
                        builder: (context, atm, child) {
                      return Text(
                          style: const TextStyle(fontSize: 15),
                          textAlign: TextAlign.right,
                          '${atm.currentAction['actionID']} | ${atm.totalActions()}');
                      // 'Set: ${atm.currentSet + 1}/${atm.totalSets}\nRep: ${atm.currentRep + 1}/${atm.totalReps}');
                    }))),
          ])))),
      ActivityActionView(action: activity.actions[0]),
      // Container(
      //     height: MediaQuery.sizeOf(context).height * .07,
      //     color: Theme.of(context).colorScheme.primaryContainer,
      //     child: Row(children: [
      //       // LinearProgressIndicator(
      //       //   value: 0.5,
      //       //   minHeight: 100,
      //       //   color: Theme.of(context).colorScheme.error,
      //       //   semanticsLabel: 'Linear progress indicator',
      //       // ),
      //       Expanded(
      //           flex: 1,
      //           child: Flex(direction: Axis.horizontal, children: [
      //             Consumer<ActivityTimerModel>(builder: (context, atm, child) {
      //               return IconButton(
      //                   iconSize: 30,
      //                   icon: atm.isActive()
      //                       ? const Icon(Icons.pause_rounded)
      //                       : const Icon(Icons.play_arrow_rounded),
      //                   onPressed: () =>
      //                       {atm.isActive() ? atm.pause() : atm.start()});
      //             }),
      //             IconButton(
      //                 iconSize: 36,
      //                 icon: const Icon(Icons.skip_next_rounded),
      //                 onPressed: () {
      //                   atm.nextAction('manual');
      //                 })
      //           ])),
      //       Expanded(
      //           flex: 1,
      //           child: Consumer<ActivityTimerModel>(
      //             builder: (context, atm, child) {
      //               return Text(
      //                   style: const TextStyle(fontSize: 20),
      //                   textAlign: TextAlign.center,
      //                   '${atm.actionCount} ${atm.actionState()}');
      //             },
      //           )),
      //       Expanded(
      //           flex: 1,
      //           child: Padding(
      //               padding: const EdgeInsets.only(right: 15),
      //               child: Consumer<ActivityTimerModel>(
      //                   builder: (context, atm, child) {
      //                 return Text(
      //                     style: const TextStyle(fontSize: 20),
      //                     textAlign: TextAlign.right,
      //                     '${atm.currentAction + 1}: ${atm.actionType}');
      //                 // 'Set: ${atm.currentSet + 1}/${atm.totalSets}\nRep: ${atm.currentRep + 1}/${atm.totalReps}');
      //               }))),
      //     ]))
    ]);
  }
}

class ActivityViewCategories extends StatelessWidget {
  const ActivityViewCategories({super.key, this.categories});

  final List<String>? categories;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
            padding: const EdgeInsets.only(bottom: 10),
            child: SizedBox(
                height: 40,
                child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
                  itemCount: categories?.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Padding(
                        padding: const EdgeInsets.only(right: 5),
                        child: ActionChip(
                          visualDensity: VisualDensity.compact,
                          avatar: const Icon(Icons.check_circle_outline),
                          label: Text(maxLines: 1, '${categories?[index]}'),
                          onPressed: () {},
                        ));
                  },
                ))),
      ],
    );
  }
}

class ActivityViewMedia extends StatelessWidget {
  const ActivityViewMedia({super.key, this.activity});

  final ActivityModel? activity;

  @override
  Widget build(BuildContext context) {
    List<Media> media = [];

    for (ActivityAction action in activity!.actions) {
      if (action.media!.isNotEmpty) {
        media.addAll(action.media as Iterable<Media>);
      }
    }

    List<Widget> mediaCards =
        List.generate(media.length, (i) => MediaCard(media: media[i]));

    return Column(
      children: [
        SizedBox(
            width: double.infinity,
            height: 100,
            child: GridView.count(
                padding: const EdgeInsets.fromLTRB(15, 0, 0, 0),
                scrollDirection: Axis.horizontal,
                crossAxisSpacing: 5,
                mainAxisSpacing: 5,
                crossAxisCount: 1,
                children: mediaCards))
      ],
    );
  }
}