import 'package:flutter/material.dart';
import 'package:physigo/exercises/exercises_validation/models/exercise.dart';
import 'package:physigo/exercises/exercises_validation/models/squat.dart';
import 'package:physigo/walking/walking_page.dart';

import 'exercises_validation/exercise_validation_page.dart';
import 'exercises_validation/models/push_up.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: false,
                  backgroundColor: Colors.amber,
                  selectedColor: Colors.yellow,
                  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),
            const WalkExerciseTile(),
            const ExerciseTile(
              exerciseName: "push up",
              exercise: pushUp,
            ),
            const ExerciseTile(exerciseName: "squat", exercise: squat),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        color: Colors.blueGrey,
        elevation: 3,
        child: ListTile(
          iconColor: Colors.white,
          textColor: Colors.white,
          title: Text(
            exerciseName.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: (_) => ExerciseValidationPage(exercise: exercise),
              ),
            );
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        color: Colors.blueGrey,
        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(),
              ),
            );
          },
        ),
      ),
    );
  }
}