import 'package:flutter/cupertino.dart';
import '../../../common/models/option_data.dart';

class PlayerSettingsView extends StatelessWidget {
  final List<OptionDataContainer> options;
  final Function(OptionData, Key)? onChange;

  const PlayerSettingsView({required this.options, this.onChange, super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
          color: CupertinoColors.white,
          borderRadius: BorderRadius.vertical(top: Radius.circular(5))
      ),
      child: ListView.builder(
        shrinkWrap: true,
        padding: const EdgeInsets.only(top: 5, bottom: 30),
        itemBuilder: (context, index) {
          final item = options[index];
          return Column(children: <Widget>[
            _buildNavTile(item, context),
            _buildSeparator()
          ]);
        },
        itemCount: options.length,
      ),
    );
  }

  Widget _buildNavTile(OptionDataContainer option, BuildContext context) {
    return CupertinoListTile(
      title: Row(
        children: [
          Text(option.title, style: TextStyle(color: CupertinoColors.black.withOpacity(0.45), fontWeight: FontWeight.w400)),
          const Spacer(),
          Text(option.options[option.selectedIndex ?? 0].title, style: const TextStyle(color: CupertinoColors.black)),
          const SizedBox(width: 7),
          const Icon(CupertinoIcons.chevron_forward, color: CupertinoColors.systemGrey)
        ],
      ),
      onTap: () async {
        await Navigator.of(context).push<bool?>(
          PageRouteBuilder(
              opaque: false,
              barrierDismissible: true,
              pageBuilder: (_, __, ___) => _buildOptionsView(option, context)),
        );
      },
    );
  }

  Widget _buildOptionsView(OptionDataContainer option, BuildContext context) {
    return Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        decoration: const BoxDecoration(
            color: CupertinoColors.white,
            borderRadius: BorderRadius.vertical(top: Radius.circular(5))
        ),
        child: TapRegion(
          onTapOutside: (_) {
            Navigator.of(context)..pop()..pop();
          },
          child: ListView.builder(
            padding: const EdgeInsets.only(top: 5, bottom: 30),
            shrinkWrap: true,
            itemBuilder: (context, index) {
              if (index == 0) {
                return Column(children: [
                  _buildBackButton(option, context),
                  _buildSeparator()
                ]);
              } else {
                return Column(children: [
                  _buildOptionTile(option, index - 1, context),
                  _buildSeparator()
                ]);
              }
            },
            itemCount: option.options.length + 1,
          ),
        ),
      ),
    );
  }

  Widget _buildBackButton(OptionDataContainer option, BuildContext context) {
    return CupertinoListTile(
        title: Row(
          children: [
            const Icon(CupertinoIcons.chevron_back, color: CupertinoColors.systemGrey),
            const SizedBox(width: 5),
            Text(option.title, style: TextStyle(color: CupertinoColors.black.withOpacity(0.45), fontWeight: FontWeight.w400)),
          ],
        ),
        onTap: () {
          Navigator.of(context).pop();
        },
    );
  }

  Widget _buildSeparator() {
    return Container(
        margin: const EdgeInsets.only(left: 20),
        height: 0.8,
        color: CupertinoColors.systemGrey4
    );
  }

  Widget _buildOptionTile(OptionDataContainer option, int index, BuildContext context) {
    final currentOption = option.options[index];
    final isSelected = option.selectedIndex == index;

    return CupertinoListTile(
          title: Row(
            children: [
              if (isSelected) const Icon(CupertinoIcons.checkmark, color: CupertinoColors.black),
              SizedBox(width: (isSelected) ? 6 : 30),
              Text(currentOption.title, style: const TextStyle(color: CupertinoColors.black, fontWeight: FontWeight.w400)),
              const Spacer()
          ],
        ),
        onTap: () {
          final key = option.key;
          if (key != null) {
            onChange?.call(currentOption, key);
            Navigator.of(context)..pop()..pop();
          }
        },
    );
  }
}