import 'package:flutter/material.dart';
import 'package:habitrack_app/pages/hydration_graph_widget.dart';

class SubpageHydrationButton extends StatelessWidget {
  const SubpageHydrationButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      margin: const EdgeInsets.only(top: 20, bottom: 7.5),
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Theme.of(context).colorScheme.primary,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          minimumSize: const Size(10, 70),
        ),
        onPressed: () => {
          Navigator.push(
            context,
            MaterialPageRoute<dynamic>(
              builder: (context) => const DashboardHydrationSubpage(),
            ),
          ),
        },
        child: Row(
          children: [
            Icon(
              Icons.local_drink,
              color: Theme.of(context).colorScheme.onPrimary,
            ),
            Text(
              ' Hydration Widgets',
              style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                    color: Theme.of(context).colorScheme.onPrimary,
                  ),
            ),
          ],
        ),
      ),
    );
  }
}

class DashboardHydrationSubpage extends StatefulWidget {
  const DashboardHydrationSubpage({super.key});

  @override
  State<StatefulWidget> createState() => _DashboardHydrationSubpageState();
}

class _DashboardHydrationSubpageState extends State<DashboardHydrationSubpage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.primaryContainer,
      appBar: AppBar(
        iconTheme: IconThemeData(
          color: Theme.of(context).colorScheme.onPrimary,
        ),
        backgroundColor: Theme.of(context).colorScheme.secondary,
        foregroundColor: Theme.of(context).colorScheme.primary,
        title: Text(
          'Statistics: Hydration Widgets',
          textScaler: const TextScaler.linear(1.2),
          style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                color: Theme.of(context).colorScheme.onPrimary,
              ),
        ),
      ),
      body: const HydrationGraphWidget(),
    );
  }
}