import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:hoshan/core/gen/assets.gen.dart';
import 'package:hoshan/ui/screens/cmp/cubit/cmp_cubit.dart';
import 'package:hoshan/ui/theme/colors.dart';
import 'package:hoshan/ui/theme/text.dart';
import 'package:hoshan/ui/widgets/components/button/loading_button.dart';
import 'package:hoshan/ui/widgets/components/dialog/dialog_handler.dart';
import 'package:hoshan/ui/widgets/components/image/network_image.dart';
import 'package:hoshan/ui/widgets/sections/header/reversible_appbar.dart';
import 'package:hoshan/ui/widgets/sections/loading/default_placeholder.dart';
import 'package:persian_number_utility/persian_number_utility.dart';

class CmpPage extends StatefulWidget {
  const CmpPage({super.key});

  @override
  State<CmpPage> createState() => _CmpPageState();
}

class _CmpPageState extends State<CmpPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ReversibleAppbar(
        context,
        titleText: 'مسابقات',
      ),
      body: Directionality(
        textDirection: TextDirection.rtl,
        child: BlocBuilder<CmpCubit, CmpState>(
          builder: (context, state) {
            if (state is CmpFail) {
              return const SizedBox();
            }
            if (state is CmpSuccess) {
              return ListView.builder(
                itemCount: state.event.events?.length ?? 0,
                physics: const BouncingScrollPhysics(),
                shrinkWrap: true,
                padding: const EdgeInsets.all(16),
                itemBuilder: (context, index) {
                  final event = state.event.events![index];
                  final enable = (event.isOpen ?? false);
                  return Column(
                    children: [
                      Opacity(
                        opacity: enable ? 1 : 0.4,
                        child: ListTile(
                          leading: AspectRatio(
                            aspectRatio: 1 / 1,
                            child: Container(
                              width: 72,
                              height: 72,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(16),
                                  color: Theme.of(context).colorScheme.surface),
                              padding: const EdgeInsets.all(8),
                              child: ImageNetwork(
                                url: event.image ?? '',
                              ),
                            ),
                          ),
                          title: Text(
                            event.title ?? '',
                            style: AppTextStyles.body3.copyWith(
                                color: Theme.of(context).colorScheme.onSurface),
                          ),
                          subtitle: Text(
                            event.subtitle ?? '',
                            style: AppTextStyles.body5.copyWith(
                                color: Theme.of(context).colorScheme.onSurface),
                          ),
                        ),
                      ),
                      event.isOpen ?? false
                          ? Column(
                        children: [
                          ListTile(
                            leading: Assets.icon.outline.clock.svg(
                                color:
                                Theme.of(context).colorScheme.primary,
                                width: 24,
                                height: 24),
                            title: Text(
                              'مهلت ارسال آثار: ${event.endAt?.toPersianDate()}',
                              style: AppTextStyles.body5.copyWith(
                                  color: Theme.of(context)
                                      .colorScheme
                                      .onSurface),
                            ),
                            minTileHeight: 10,
                          ),
                        ],
                      )
                          : Column(
                        children: [
                          Opacity(
                            opacity: 0.4,
                            child: ListTile(
                              leading: Assets.icon.outline.clock.svg(
                                  color: Theme.of(context)
                                      .colorScheme
                                      .primary,
                                  width: 24,
                                  height: 24),
                              title: Text(
                                'تاریخ برگزاری: ${event.startAt?.toPersianDate()} لغایت ${event.endAt?.toPersianDate()}',
                                style: AppTextStyles.body5.copyWith(
                                    color: Theme.of(context)
                                        .colorScheme
                                        .onSurface),
                              ),
                              minTileHeight: 10,
                            ),
                          ),
                          ListTile(
                            leading: Assets.icon.outline.galleryAdd.svg(
                                color:
                                Theme.of(context).colorScheme.primary,
                                width: 24,
                                height: 24),
                            title: Text(
                              'تعداد کل آثار دریافتی: ${event.totalReceivedWorks} اثر',
                              style: AppTextStyles.body5.copyWith(
                                  color: Theme.of(context)
                                      .colorScheme
                                      .onSurface),
                            ),
                            minTileHeight: 10,
                          ),
                          ListTile(
                            leading: Assets.icon.outline.profile.svg(
                                color:
                                Theme.of(context).colorScheme.primary,
                                width: 24,
                                height: 24),
                            title: Text(
                              'تعداد کل شرکت‌کنندگان: ${event.totalParticipants} نفر',
                              style: AppTextStyles.body5.copyWith(
                                  color: Theme.of(context)
                                      .colorScheme
                                      .onSurface),
                            ),
                            minTileHeight: 10,
                          ),
                        ],
                      ),
                      ListTile(
                        onTap: () {
                          DialogHandler(context: context)
                              .rewardForCmp(rewards: event.awards ?? '');
                        },
                        minTileHeight: 10,
                        leading: Assets.icon.outline.gift
                            .svg(color: Theme.of(context).colorScheme.primary),
                        title: Text(
                          'جوایز مسابقه',
                          style: AppTextStyles.body5.copyWith(
                              color: Theme.of(context).colorScheme.primary),
                        ),
                      ),
                      const SizedBox(
                        height: 8,
                      ),
                      if (!(event.isOpen ?? true) &&
                          event.winners != null &&
                          event.winners!.isNotEmpty)
                        ListTile(
                          onTap: () {
                            DialogHandler(context: context)
                                .winnersForCmp(winners: event.winners!);
                          },
                          minTileHeight: 10,
                          leading: Assets.icon.outline.profileTick.svg(
                              color: Theme.of(context).colorScheme.primary),
                          title: Text(
                            'نفرات برتر مسابقه',
                            style: AppTextStyles.body5.copyWith(
                                color: Theme.of(context).colorScheme.primary),
                          ),
                        ),
                      const SizedBox(
                        height: 8,
                      ),
                      Opacity(
                        opacity: enable ? 1 : 0.4,
                        child: LoadingButton(
                            color: enable
                                ? AppColors.green.defaultShade
                                : AppColors.gray.defaultShade,
                            backgroundColor: enable?AppColors.green.defaultShade
                                : AppColors.green.defaultShade,
                            onPressed: enable
                                ? () {
                              if (event.description != null) {
                                DialogHandler(context: context)
                                    .conditionsForCmp(
                                    awards: event.description!);
                              }
                            }
                                : null,
                            width: double.infinity,
                            child: Text(
                              enable ? 'شرایط شرکت در مسابقه' : 'پایان یافته',
                              style: AppTextStyles.body4
                                  .copyWith(color:enable? Colors.white:Colors.black),
                            )),
                      ),
                      const SizedBox(
                        height: 16,
                      ),
                      if (index != state.event.events!.length - 1)
                        const Divider(),
                      const SizedBox(
                        height: 16,
                      ),
                    ],
                  );
                },
              );
            }

            return ListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              itemCount: 10,
              shrinkWrap: true,
              padding: const EdgeInsets.all(16),
              itemBuilder: (context, index) {
                return Column(
                  children: [
                    Row(
                      children: [
                        SizedBox(
                          width: 72,
                          height: 72,
                          child: AspectRatio(
                            aspectRatio: 1 / 1,
                            child: DefaultPlaceHolder(
                              child: Container(
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(16),
                                    color:
                                    Theme.of(context).colorScheme.surface),
                                padding: const EdgeInsets.all(8),
                                child: const SizedBox(),
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(
                          width: 16,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            DefaultPlaceHolder(
                              child: Container(
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.circular(8)),
                                child: Text(
                                  'event.title ?? ' '',
                                  style: AppTextStyles.body4.copyWith(
                                      color: Theme.of(context)
                                          .colorScheme
                                          .primary),
                                ),
                              ),
                            ),
                            const SizedBox(
                              height: 8,
                            ),
                            DefaultPlaceHolder(
                              child: Container(
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.circular(8)),
                                child: Text(
                                  ' event.description ?? ' '',
                                  style: AppTextStyles.body6.copyWith(
                                      color: Theme.of(context)
                                          .colorScheme
                                          .onSurface),
                                ),
                              ),
                            )
                          ],
                        )
                      ],
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    Row(
                      children: [
                        DefaultPlaceHolder(
                          child: Container(
                            width: 300,
                            height: 32,
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(8)),
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    Row(
                      children: [
                        DefaultPlaceHolder(
                          child: Container(
                            width: 250,
                            height: 32,
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(8)),
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    LoadingButton(
                        loading: true,
                        width: double.infinity,
                        color: AppColors.gray[800],
                        child: Text(
                          'شرایط شرکت در مسابقه',
                          style:
                          AppTextStyles.body4.copyWith(color: Colors.white),
                        )),
                    const SizedBox(
                      height: 16,
                    ),
                    if (index != 2) const Divider(),
                    const SizedBox(
                      height: 16,
                    ),
                  ],
                );
              },
            );
          },
        ),
      ),
    );
  }
}