import 'package:flutter/material.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/string_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/modules/notification_setting/models/notification_preference_model.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/app_style/app_text_style.dart';
import 'package:test_sa/new_views/pages/land_page/widgets/static_filter_buttons.dart';
import 'package:test_sa/views/widgets/item_views/info_header_widget.dart';
import 'package:test_sa/views/widgets/item_views/info_text_widget.dart';

class NotificationPreferenceCard extends StatelessWidget {
  final NotificationTemplate template;
  final Function(bool isDisabled) onToggleChange;
  final Function(List<int> channelIds) onChannelChange;

  const NotificationPreferenceCard({
    Key? key,
    required this.template,
    required this.onToggleChange,
    required this.onChannelChange,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final bool isEnabled = !(template.isDisabled ?? false);
    final bool isMandatory = template.mandatory ?? false;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      spacing: 4.toScreenHeight,
      children: [
        if(isMandatory) ...[
          4.height,
          Text(
            'You cannot update this notification as it is mandatory.'.addTranslation,
            style: AppTextStyle.tiny.copyWith(
              color: AppColor.red30,
            ),
          ),
        ],
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: InfoHeader16Widget(
                template.templateName ?? '',
              ),
            ),
            8.width,
            _buildCompactToggle(context, isEnabled, isMandatory),
          ],
        ),
        InfoTextWidget(
          label: context.translation.notificationModule,
          value: template.moduleName ?? '',
        ),
        InfoTextWidget(
          label: 'Sub Module'.addTranslation,
          value: template.subModuleName ?? '',
        ),
        if (template.templateChannels != null && template.templateChannels!.isNotEmpty) ...[
          InfoTextLabelWidget(
           label:  '${context.translation.channelPreference} :',
          ),
          _buildChannelChips(context, isMandatory),

        ],
      ],
    ).toShadowContainer(context);
  }

  Widget _buildCompactToggle(BuildContext context, bool isEnabled, bool isMandatory) {
    return Container(
      width: 99.toScreenWidth,
      height: 32.toScreenHeight,
      padding: EdgeInsets.all(4.toScreenHeight),
      decoration: BoxDecoration(
        color: AppColor.toggleContainerBg(context),
        borderRadius: BorderRadius.circular(6),
        border: Border.all(color: AppColor.border2Color(context)),
      ),
      child: IgnorePointer(
        ignoring: isMandatory,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            GestureDetector(
              onTap: () {
                if(!isMandatory){
                  onToggleChange(false);
                }
              },
              child: _buildToggleOption(
                context: context,
                label: context.translation.enable,
                isActive: isEnabled,
                activeColor: AppColor.toggleEnableBgColor(context),
                inactiveColor: Colors.transparent,
                textColor: isEnabled
                    ? AppColor.toggleEnableTextColor(context)
                    : AppColor.toggleDisableTextColor(context),
              ),
            ),
            GestureDetector(
              onTap: () {
                if(!isMandatory){
                  onToggleChange(true);
                }
              },
              child: _buildToggleOption(
                context: context,
                label: context.translation.disable,
                isActive: !isEnabled,
                activeColor: AppColor.toggleDisableBgColor(context),
                inactiveColor: Colors.transparent,
                textColor: !isEnabled
                    ? AppColor.toggleDisable2TextColor(context)
                    : AppColor.toggleDisableTextColor(context),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildToggleOption({
    required BuildContext context,
    required String label,
    required bool isActive,
    required Color activeColor,
    required Color inactiveColor,
    required Color textColor,
  }) {
    return Container(
      width: 44.toScreenWidth,
      height: 22.toScreenHeight,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: isActive ? activeColor : inactiveColor,
        borderRadius: BorderRadius.circular(3),
      ),
      child: Text(
        label.toCamelCase,
        style: AppTextStyle.body2.copyWith(
          color: textColor,
          fontSize: 10.toScreenWidth,
          fontWeight: FontWeight.w600,
        ),
      ),
    );
  }

  Widget _buildChannelChips(BuildContext context, bool isMandatory) {
    final Map<String, int> channelsMap = {};

    if (template.templateChannels != null) {
      for (var channel in template.templateChannels!) {
        if (channel.name != null && channel.id != null) {
          channelsMap[channel.name!] = channel.id!;
        }
      }
    }

    return IgnorePointer(
      ignoring: isMandatory,
      child: RequestsTypeFilter(
        items: channelsMap,
        initialValues: template.selectedChannelIds,
        onSelect: (selectedIds) {
          if (!isMandatory) {
            onChannelChange(selectedIds);
          }
        },
      ),
    );
  }
}