import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/data/models/event/business_member_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/core/presentation/widgets/icon_row_info_widget.dart';
import 'package:krow/features/events/domain/blocs/details/event_details_bloc.dart';
import 'package:krow/features/events/presentation/event_details/widgets/role/role_widget.dart';

class ShiftWidget extends StatefulWidget {
  final int index;
  final ShiftState shiftState;

  const ShiftWidget({super.key, required this.index, required this.shiftState});

  @override
  State<ShiftWidget> createState() => _ShiftWidgetState();
}

class _ShiftWidgetState extends State<ShiftWidget> {
  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 150),
      padding: const EdgeInsets.only(left: 12, right: 12),
      margin: const EdgeInsets.only(top: 12),
      decoration: KwBoxDecorations.white12,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildShiftHeader(context),
          AnimatedSize(
            duration: const Duration(milliseconds: 150),
            alignment: Alignment.topCenter,
            child: Container(
              height: widget.shiftState.isExpanded ? null : 0,
              decoration: const BoxDecoration(),
              child: Column(
                children: [
                  IconRowInfoWidget(
                      icon: Assets.images.icons.location.svg(),
                      title: 'Address',
                      value: widget
                              .shiftState.shift.fullAddress?.formattedAddress ??
                          ''),
                  const Gap(16),
                  const Divider(
                      color: AppColors.grayTintStroke, thickness: 1, height: 0),
                  const Gap(16),
                  Stack(
                    children: [
                      IconRowInfoWidget(
                          icon: Assets.images.icons.userTag.svg(),
                          title: 'Shift Contact',
                          value: 'Manager'),
                      if (widget.shiftState.shift.managers.isNotEmpty)
                        Positioned(
                            bottom: 4,
                            top: 4,
                            right: 0,
                            child: _contact(
                                widget.shiftState.shift.managers.first))
                    ],
                  ),
                  const Gap(16),
                  ListView.builder(
                    itemCount: widget.shiftState.positions.length,
                    primary: false,
                    shrinkWrap: true,
                    itemBuilder: (_, index) {
                      return RoleWidget(
                        roleState: widget.shiftState.positions[index],
                      );
                    },
                  ),
                  const Gap(12),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildShiftHeader(context) {
    return GestureDetector(
      onTap: () {
        BlocProvider.of<EventDetailsBloc>(context)
            .add(OnShiftHeaderTapEvent(widget.shiftState));
      },
      child: Container(
        color: Colors.transparent,
        child: Padding(
          padding: const EdgeInsets.only(top: 24, bottom: 24),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('Shift Details #${widget.index + 1}',
                  style: AppTextStyles.headingH1),
              Container(
                height: 40,
                width: 40,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  border: Border.all(
                    color: AppColors.grayTintStroke,
                  ),
                ),
                child: AnimatedRotation(
                  duration: const Duration(milliseconds: 200),
                  turns: widget.shiftState.isExpanded ? 0.5 : 0,
                  child: Center(
                    child: Assets.images.icons.chevronDown.svg(
                      colorFilter: ColorFilter.mode(
                        widget.shiftState.isExpanded
                            ? AppColors.blackBlack
                            : AppColors.blackCaptionText,
                        BlendMode.srcIn,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Container _contact(BusinessMemberModel contact) {
    return Container(
      height: 28,
      padding: const EdgeInsets.only(left: 2, right: 12, top: 2, bottom: 2),
      decoration: BoxDecoration(
        color: AppColors.tintBlue,
        borderRadius: BorderRadius.circular(14),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
              height: 24,
              width: 24,
              decoration: BoxDecoration(
                color: AppColors.blackGray,
                borderRadius: BorderRadius.circular(12),
              )),
          const Gap(8),
          Text(
            '${contact.firstName} ${contact.lastName}',
            style: AppTextStyles.bodyMediumMed,
          ),
        ],
      ),
    );
  }
}
