import 'package:blog_app/layout/menu.dart';
import 'package:flutter/material.dart';
import 'package:flutter_common/layout/theme_layout.dart';

class AppDrawer extends StatefulWidget {
  final int currentPageIndex;
  final Function(int) onTapDrawerItem;

  const AppDrawer({
    super.key,
    required this.currentPageIndex,
    required this.onTapDrawerItem,
  });

  @override
  State<AppDrawer> createState() => AppDrawerState();
}

class AppDrawerState extends State<AppDrawer> {
  Widget _buildDrawerHeader() {
    final colors = Theme.of(context).colorScheme;

    return Container(
      width: double.infinity,
      height: 200,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [colors.primary, colors.inversePrimary],
        ),
      ),
      child: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ClipOval(
              child: Image.asset(
                'assets/images/avatar.jpg',
                width: 80,
                height: 80,
                fit: BoxFit.cover,
              ),
            ),
            SizedBox(height: 16),
            Text(
              'Cxx0822',
              style: TextStyle(
                color: colors.surface,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildDrawerBody() {
    return ListView.separated(
      shrinkWrap: true,
      padding: EdgeInsets.zero,
      itemCount: pages.length,
      separatorBuilder: (context, index) => SizedBox(height: 8),
      itemBuilder: (context, index) => _buildDrawerItem(index),
    );
  }

  Widget _buildDrawerItem(int index) {
    final colors = Theme.of(context).colorScheme;
    final isSelected = index == widget.currentPageIndex;
    final boxColor =
        isSelected ? colors.primary.withAlpha(50) : Colors.transparent;
    final iconColor =
        isSelected ? colors.primary : colors.onSurface.withAlpha(100);
    final textColor =
        isSelected ? colors.primary : colors.onSurface.withAlpha(200);

    return Container(
      margin: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
      decoration: BoxDecoration(
        color: boxColor,
        borderRadius: BorderRadius.circular(12),
      ),
      child: ListTile(
        leading: Icon(pages[index].icon, color: iconColor, size: 24),
        title: Text(
          pages[index].title,
          style: TextStyle(
            color: textColor,
            fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
            fontSize: 16,
          ),
        ),
        trailing:
            isSelected
                ? Icon(Icons.arrow_forward_ios, size: 16, color: iconColor)
                : null,
        onTap: () => widget.onTapDrawerItem(index),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Container(
        color: Theme.of(context).colorScheme.surface,
        child: Column(
          children: [
            _buildDrawerHeader(),
            _buildDrawerBody(),
            const Divider(),
            ThemeLayout(),
          ],
        ),
      ),
    );
  }
}