import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/data/models/event/tag_model.dart';
import 'package:krow/core/presentation/gen/assets.gen.dart';
import 'package:krow/core/presentation/styles/kw_box_decorations.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';
import 'package:krow/features/create_event/domain/bloc/create_event_bloc.dart';

class CreateEventTagsCard extends StatelessWidget {
  const CreateEventTagsCard({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CreateEventBloc, CreateEventState>(
      buildWhen: (previous, current) =>
          previous.tags != current.tags ||
          previous.entity.tags != current.entity.tags,
      builder: (context, state) {
        if(state.tags.isEmpty) return const SizedBox();
        return Container(
          width: double.infinity,
          margin: const EdgeInsets.only(top: 12),
          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 24),
          decoration: KwBoxDecorations.white12,
          child: _buildChips(context, state.tags, state.entity.tags ?? []),
        );
      },
    );
  }

  Widget _buildChips(BuildContext context, List<TagModel> allTags,
      List<TagModel> selectedTags) {
    return Padding(
      padding: const EdgeInsets.only(left: 16, right: 12),
      child: Wrap(
        runSpacing: 8,
        spacing: 8,
        children: allTags
            .map((e) =>
                _buildTag(context, e, selectedTags.any((t) => e.id == t.id)))
            .toList(),
      ),
    );
  }

  Widget _buildTag(BuildContext context, TagModel tag, bool selected) {
    const duration = Duration(milliseconds: 150);
    return GestureDetector(
      onTap: () {
        BlocProvider.of<CreateEventBloc>(context)
            .add(CreateEventTagSelected(tag));
      },
      child: AnimatedContainer(
        duration: duration,
        padding: const EdgeInsets.all(8),
        height: 44,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          border: Border.all(
            color: selected ? AppColors.blackBlack : AppColors.grayTintStroke,
            width: 1,
          ),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            AnimatedContainer(
              duration: duration,
              height: 28,
              width: 28,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: selected ? AppColors.blackBlack : AppColors.tintGray,
              ),
              child: Center(
                child: getImageById(tag.id).svg(
                    width: 12.0,
                    height: 12.0,
                    colorFilter: ColorFilter.mode(
                        selected ? AppColors.grayWhite : AppColors.blackBlack,
                        BlendMode.srcIn)),
              ),
            ),
            const Gap(8),
            Text(
              tag.name,
              style: AppTextStyles.bodySmallReg
                  .copyWith(color: AppColors.bgColorDark),
            ),
            const Gap(8),
            AnimatedContainer(
              duration: duration,
              height: 16,
              width: 16,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(
                  color: selected
                      ? AppColors.blackBlack
                      : AppColors.grayTintStroke,
                  width: 1,
                ),
              ),
              child: Center(
                child: AnimatedContainer(
                    duration: duration,
                    height: 6,
                    width: 6,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color:
                          selected ? AppColors.blackBlack : Colors.transparent,
                    )),
              ),
            ),
          ],
        ),
      ),
    );
  }

  getImageById(String id) {
    switch (id) {
      case '1':
        return Assets.images.icons.tags.award;
      case '2':
        return Assets.images.icons.tags.briefcase;
      case '3':
        return Assets.images.icons.tags.flash;
    }
  }
}
