import 'package:flutter/material.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/pages/land_page/dashboard_fragments/progress_fragment.dart';
import 'package:test_sa/new_views/pages/land_page/dashboard_fragments/recent_activites_fragment.dart';
import 'package:test_sa/new_views/pages/land_page/dashboard_fragments/requests_fragment.dart';
import 'package:test_sa/views/pages/user/notifications/notifications_page.dart';

class DashboardPage extends StatefulWidget {
  final VoidCallback onDrawerPress;

  const DashboardPage({Key key, this.onDrawerPress}) : super(key: key);

  @override
  State<DashboardPage> createState() => _DashboardPageState();
}

class _DashboardPageState extends State<DashboardPage> {
  int _currentPage = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: const Color(0xffF8F9FB),
        titleSpacing: 0,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: 48,
              height: 48,
              decoration: const ShapeDecoration(
                image: DecorationImage(
                  image: NetworkImage(
                      "https://www.shutterstock.com/shutterstock/photos/1714666150/display_1500/stock-photo-head-shot-portrait-close-up-smiling-confident-businessman-wearing-glasses-looking-at-camera-1714666150.jpg"),
                  fit: BoxFit.cover,
                ),
                shape: OvalBorder(
                  side: BorderSide(width: 1, color: Color(0xFFE4E5E6)),
                ),
              ),
            ).onPress(widget.onDrawerPress),
            Stack(
              alignment: Alignment.topRight,
              children: [
                const Icon(
                  Icons.notifications,
                  color: Color(0xff767676),
                  size: 30,
                ).paddingOnly(top: 6, end: 0),
                Positioned(
                  top: 0,
                  right: 0,
                  child: Container(
                    padding: const EdgeInsets.all(4),
                    decoration: const ShapeDecoration(
                      color: Color(0xFFD02127),
                      shape: CircleBorder(),
                    ),
                    child: Text("3", style: AppTextStyles.bodyText),
                  ),
                )
              ],
            ).onPress(() {
              Navigator.of(context).pushNamed(NotificationsPage.id);
            }),
          ],
        ).paddingOnly(start: 16, end: 16),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                context.translation.welcome,
                style: AppTextStyles.heading6.copyWith(color: context.isDark ? AppColor.neutral10 : AppColor.neutral20),
              ),
              Text(
                "Eng Mahmoud",
                style: AppTextStyles.heading2.copyWith(color: context.isDark ? AppColor.neutral30 : AppColor.neutral50, fontWeight: FontWeight.w600),
              ),
              24.height,
              Row(
                children: [
                  indicatorView(0),
                  3.width,
                  indicatorView(1),
                  3.width,
                  indicatorView(2),
                  10.width,
                  Text(
                    "0${_currentPage + 1}/03",
                    style: Theme.of(context).textTheme.labelMedium?.copyWith(fontWeight: FontWeight.w500),
                  ),
                ],
              ),
            ],
          ).paddingOnly(start: 16, end: 16, top: 8, bottom: 8),
          PageView(
            onPageChanged: (index) => setState(() => _currentPage = index),
            children: [
              RequestsFragment(),
              const ProgressFragment(),
              RecentActivitiesFragment(),
            ],
          ).expanded,
        ],
      ),
    );
  }

  Widget indicatorView(int index) {
    bool isActive = _currentPage == index;

    return AnimatedContainer(
      duration: const Duration(milliseconds: 250),
      width: (isActive ? 30 : 12).toScreenWidth,
      height: 9.toScreenHeight,
      decoration: BoxDecoration(color: isActive ? AppColor.green50 : AppColor.neutral40, borderRadius: BorderRadius.circular(8)),
    );
  }
}