import 'package:flutter/material.dart';

import '../walking/walking_page.dart';
import 'exercises_validation/exercise_validation_page.dart';
import 'exercises_validation/models/exercise.dart';
import 'services/exercises_service.dart';

class ExercisesPage extends StatelessWidget {
  const ExercisesPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Center(
              child: Text(
                "Exercises",
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                  // color: Colors.white,
                ),
              ),
            ),
            const SizedBox(height: 24),
            const TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: "Search exercise...",
              ),
            ),
            const SizedBox(height: 24),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                FilterChip(
                  label: const Text("Easy", style: TextStyle(color: Colors.white, fontSize: 18)),
                  selected: true,
                  backgroundColor: Colors.lightGreen,
                  selectedColor: Colors.lightGreen,
                  checkmarkColor: Colors.white,
                  onSelected: (_) {},
                ),
                FilterChip(
                  label: const Text("Normal", style: TextStyle(color: Colors.white, fontSize: 18)),
                  selected: true,
                  backgroundColor: Colors.amber,
                  selectedColor: Colors.amber,
                  checkmarkColor: Colors.white,
                  onSelected: (_) {},
                ),
                FilterChip(
                  label: const Text("Hard", style: TextStyle(color: Colors.white, fontSize: 18)),
                  selected: true,
                  backgroundColor: Colors.red,
                  selectedColor: Colors.red,
                  checkmarkColor: Colors.white,
                  onSelected: (_) {},
                ),
              ],
            ),
            const SizedBox(height: 48),
            FutureBuilder<List<Exercise>>(
              future: ExercisesService.getExercises(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const Center(child: CircularProgressIndicator());
                }
                final exercises = snapshot.data!;
                exercises.sort((a, b) => a.difficulty.compareTo(b.difficulty));
                return Flexible(
                  child: Scrollbar(
                    isAlwaysShown: true,
                    thickness: 8,
                    child: ListView(
                      shrinkWrap: true,
                      children: [
                        const WalkExerciseTile(),
                        ...exercises.map((exercise) => ExerciseTile(exercise: exercise))
                      ],
                    ),
                  ),
                );
              },
            )
          ],
        ),
      ),
    );
  }
}

class ExerciseTile extends StatelessWidget {
  final Exercise exercise;
  const ExerciseTile({
    required this.exercise,
    Key? key,
  }) : super(key: key);

  Color get cardColor {
    if (exercise.difficulty == 0) return Colors.lightGreen;
    if (exercise.difficulty == 1) return Colors.amber;
    if (exercise.difficulty == 2) return Colors.red;
    return Colors.blueGrey;
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        color: cardColor,
        elevation: 3,
        child: ListTile(
          iconColor: Colors.white,
          textColor: Colors.white,
          title: Text(
            exercise.name.toUpperCase(),
            textAlign: TextAlign.center,
            style: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              letterSpacing: 1.8,
            ),
          ),
          trailing: const Icon(Icons.arrow_forward),
          onTap: exercise.startMovement != null // not all exercises have validation right now
              ? () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) => ExerciseValidationPage(exercise: exercise),
                    ),
                  );
                }
              : null,
        ),
      ),
    );
  }
}

class WalkExerciseTile extends StatelessWidget {
  const WalkExerciseTile({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        color: Colors.lightGreen,
        elevation: 3,
        child: ListTile(
          iconColor: Colors.white,
          textColor: Colors.white,
          title: Text(
            "walk".toUpperCase(),
            textAlign: TextAlign.center,
            style: const TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              letterSpacing: 1.8,
            ),
          ),
          trailing: const Icon(Icons.arrow_forward),
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (_) => WalkingPage(),
              ),
            );
          },
        ),
      ),
    );
  }
}