import 'dart:async';

import 'package:flutter/material.dart';

import 'package:pweb/services/posthog.dart';
import 'package:pweb/widgets/sidebar/destinations.dart';


class SideMenuColumn extends StatelessWidget {
  final ThemeData theme;
  final String? avatarUrl;
  final String? userName;
  final List<PayoutDestination> items;
  final PayoutDestination selected;
  final void Function(PayoutDestination) onSelected;

  const SideMenuColumn({
    super.key,
    required this.theme,
    required this.avatarUrl,
    required this.userName,
    required this.items,
    required this.selected,
    required this.onSelected,
  });

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: const BoxConstraints(maxWidth: 320),
      child: Material(
        elevation: 4,
        borderRadius: BorderRadius.circular(16),
        color: theme.colorScheme.onSecondary,
        child: ListView(
          shrinkWrap: true,
          padding: const EdgeInsets.symmetric(vertical: 8),
          children: items.map((item) {
            final isSelected = item == selected;
            final backgroundColor = isSelected
                ? theme.colorScheme.primaryContainer
                : Colors.transparent;

            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              child: Container(
                decoration: BoxDecoration(
                  color: backgroundColor,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: InkWell(
                  onTap: () {
                    onSelected(item);
                    unawaited(PosthogService.pageOpened(item, uiSource: 'sidebar'));
                  },
                  borderRadius: BorderRadius.circular(12),
                  hoverColor: theme.colorScheme.primaryContainer,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 12),
                    child: Row(
                      children: [
                        Icon(item.icon, color: theme.iconTheme.color, size: 28),
                        const SizedBox(width: 16),
                        Text(
                          item.localizedLabel(context),
                          style: theme.textTheme.bodyMedium?.copyWith(
                            fontSize: 16,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}