import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:vitalapp/pages/home/controller.dart';
import 'package:vitalapp/pages/home/models/menu.dart';

class HomeMenuListViewWidget extends StatelessWidget {
  final List<HomeMenuItem> source;
  final ScrollController? scrollerController;
  final String? currentSelectMenu;

  const HomeMenuListViewWidget({
    super.key,
    required this.source,
    this.scrollerController,
    this.currentSelectMenu = '/medicals',
  });

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      shrinkWrap: true,
      controller: scrollerController,
      itemCount: source.length,
      itemBuilder: (_, index) {
        return HomeMenuItemWidget(
          data: source[index],
        );
      },
    );
  }
}

class HomeMenuItemWidget extends StatelessWidget {
  final HomeMenuItem data;

  const HomeMenuItemWidget({super.key, required this.data});

  @override
  Widget build(BuildContext context) {
    final homeController = Get.find<HomeController>();
    final isSelect = data.routeName == homeController.state.currentSelectMenu;

    Widget child = _buildBody();
    if (isSelect) {
      child = Stack(
        children: [
          Container(width: 4, color: Colors.white),
          Positioned.fill(child: child),
        ],
      );
    }
    return Container(
      width: 120,
      height: 75,
      color: isSelect ? Colors.black.withOpacity(0.2333) : null,
      child: child,
    );
  }

  Widget _buildBody() {
    return Ink(
      color: Colors.white,
      child: InkWell(
        splashColor: Colors.cyanAccent,
        onTap: () {
          Get.find<HomeController>().switchActiveMenu(data);
        },
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            data.iconWidget ??
                Icon(
                  data.iconData,
                  size: 32,
                  color: Colors.white,
                ),
            const SizedBox(height: 4),
            Text(
              data.title,
              style: const TextStyle(color: Colors.white, fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}