import 'package:flutter/material.dart';
import 'package:flutter_expandable_fab/flutter_expandable_fab.dart';
import 'package:provider/provider.dart';
import 'package:sendtrain/database/database.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/activity_view_categories.dart';
import 'package:sendtrain/widgets/activity_view_media.dart';
import 'package:sendtrain/widgets/activity_view_types.dart';

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

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

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

    atm.setup(activityModel, activity);

    return Scaffold(
        floatingActionButtonLocation: ExpandableFab.location,
        floatingActionButton: ExpandableFab(
            distance: 70,
            type: ExpandableFabType.up,
            overlayStyle: ExpandableFabOverlayStyle(
              color: Colors.black.withOpacity(0.5),
              blur: 10,
            ),
            children: [
              FloatingActionButton.extended(
                icon: const Icon(Icons.history_outlined),
                label: Text('Restart'),
                onPressed: () {},
              ),
              FloatingActionButton.extended(
                icon: const Icon(Icons.done_all_outlined),
                label: Text('Done'),
                onPressed: () {},
              ),
              FloatingActionButton.extended(
                icon: const Icon(Icons.edit_outlined),
                label: Text('Edit'),
                onPressed: () {},
              ),
            ]),
        body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          AppBar(
            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)),
          Padding(
              padding: const EdgeInsets.fromLTRB(10, 0, 0, 10),
              child: Flex(direction: Axis.horizontal, children: [
                ActivityViewCategories(categories: [activity.category]),
                ActivityViewTypes(types: [activity.type])
              ])),
          Padding(
              padding: const EdgeInsets.only(
                  top: 0, bottom: 10, left: 15, right: 15),
              child: Text(
                  textAlign: TextAlign.left,
                  style: const TextStyle(fontSize: 15),
                  activity.description)),
          const Padding(
              padding: EdgeInsets.fromLTRB(15, 20, 0, 10),
              child: Text(
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  'Media:')),
          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: Row(children: [
                    Ink(
                        width: 70,
                        color: Theme.of(context).colorScheme.primaryContainer,
                        child: Consumer<ActivityTimerModel>(
                          builder: (context, atm, child) {
                            return IconButton(
                                alignment: AlignmentDirectional.center,
                                icon: atm.isActive
                                    ? const Icon(Icons.pause_rounded)
                                    : const Icon(Icons.play_arrow_rounded),
                                onPressed: () =>
                                    {atm.isActive ? atm.pause() : atm.start()});
                          },
                        )),
                    Expanded(
                        flex: 1,
                        child: Stack(alignment: Alignment.center, children: [
                          Container(
                            alignment: Alignment.center,
                            child: Consumer<ActivityTimerModel>(
                              builder: (context, atm, child) {
                                return Text(
                                    style: const TextStyle(fontSize: 20),
                                    textAlign: TextAlign.center,
                                    '${atm.actionCount} ${atm.currentAction['type']}');
                              },
                            ),
                          ),
                          Container(
                              alignment: Alignment.centerRight,
                              padding: EdgeInsets.only(right: 15),
                              child: Consumer<ActivityTimerModel>(
                                  builder: (context, atm, child) {
                                return Text(
                                    style: const TextStyle(fontSize: 12),
                                    textAlign: TextAlign.right,
                                    '${atm.currentAction['actionID'] + 1} of ${atm.totalActions()}');
                              })),
                        ])),
                  ]))),
          Padding(
              padding: EdgeInsets.only(left: 14, right: 14),
              child:
                  Consumer<ActivityTimerModel>(builder: (context, atm, child) {
                return LinearProgressIndicator(
                  value: atm.progress,
                  semanticsLabel: 'Activity Progress',
                );
              })),
          ActivityActionView(action: activityModel.actions[0]),
        ]));
  }
}