import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:vnoteapp/components/cell.dart';
import 'package:vnoteapp/components/panel.dart';
import 'package:vnoteapp/consts/styles.dart';
import 'package:vnoteapp/pages/from_page/controller.dart';
import 'package:vnoteapp/pages/from_page/models/menu.dart';

class FromMenuListViewWidget extends StatefulWidget {
  final List<FromMenuItem> source;
  final ScrollController? scrollerController;

  const FromMenuListViewWidget({
    super.key,
    required this.source,
    this.scrollerController,
  });

  @override
  State<FromMenuListViewWidget> createState() => _FromMenuListViewWidgetState();
}

class _FromMenuListViewWidgetState extends State<FromMenuListViewWidget> {
  late List<FromMenuItem> sourceList = widget.source;
  @override
  Widget build(BuildContext context) {
    return SizedBox(
        width: 440,
        // padding: const EdgeInsets.all(16).copyWith(right: 0),
        // color: Colors.white,
        child: VPanel(
          child: Column(
              children: sourceList.map(
            (item) {
              return FromItemWidget(
                data: item,
                onChangeTab: () => _onChangeTab(item),
              );
            },
          ).toList()),
        ));
  }

  void _onChangeTab(FromMenuItem data) {
    final index = sourceList.indexWhere((e) => e.routeName == data.routeName);
    if (index < 0) return;

    sourceList.firstWhereOrNull((e) => e.isSelected)?.isSelected = false;
    sourceList[index].isSelected = true;
    Get.find<FromPageController>().switchNavByName(data.routeName);
    setState(() {});
  }
}

class FromItemWidget extends StatelessWidget {
  final FromMenuItem data;
  final VoidCallback onChangeTab;

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

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => onChangeTab.call(),
      child: Container(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          borderRadius: GlobalStyles.borderRadius,
          color: data.isSelected ? Colors.red : Colors.white,
        ),
        child: Row(
          children: [
            const Icon(Icons.access_time_sharp),
            Text(
              data.title,
            ),
          ],
        ),
      ),
    );
    return VListFormCell(
      label: data.title,
      content: '',
      onTap: () => onChangeTab.call(),
    );
  }
}
