import 'package:eatvio_app/core/locator_service.dart';
import 'package:eatvio_app/core/theme/custom_text_style.dart';
import 'package:eatvio_app/core/theme/theme_helper.dart';
import 'package:eatvio_app/core/widgets/custom_outlined_button.dart';
import 'package:eatvio_app/core/widgets/custom_text_form_field.dart';
import 'package:eatvio_app/core/widgets/main_background_bouble.dart';
import 'package:eatvio_app/features/create_plan/presentation/cubit/create_plan_cubit.dart';
import 'package:eatvio_app/features/create_plan/presentation/cubit/create_plan_state.dart';
import 'package:eatvio_app/features/create_plan/presentation/widgets/option_widget.dart';
import 'package:eatvio_app/features/create_plan/presentation/widgets/options_count_button.dart';
import 'package:eatvio_app/features/create_plan/presentation/widgets/plan_duration_drop_down_widget.dart';
import 'package:eatvio_app/features/create_plan/presentation/widgets/plan_image_picker_widget.dart';
import 'package:eatvio_app/features/create_plan/presentation/widgets/plan_type_choice_widget.dart';
import 'package:eatvio_app/features/create_plan/presentation/widgets/select_exact_option_widget.dart';
import 'package:eatvio_app/generated/l10n.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class CreatePlanScreen extends StatelessWidget {
  static const name = 'createPlanScreen';
  static const path = '/create-Plan-screen';
  const CreatePlanScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => sl<CreatePlanCubit>(),
      child: const CreatePlanScreenContent(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final s = S.of(context);
    return Scaffold(
      backgroundColor: appTheme.gray100,
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          s.adding_plan,
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          softWrap: true,
          style: TextStyles.headingXLSemibold.copyWith(color: appTheme.black),
        ),
      ),
      body: Stack(
        children: [
          SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 8),
                MainBackgroundBouble(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(height: 16),
                      Text(
                        s.label,
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis,
                        softWrap: true,
                        style: TextStyles.textSMedium.copyWith(color: appTheme.black),
                      ),
                      SizedBox(height: 4),
                      CustomTextFormField(
                        hintText: s.plan_label_desc,
                        onChanged: (value) {
                          context.read<CreatePlanCubit>().setName(value);
                        },
                        maxLength: 150,
                      ),
                      SizedBox(height: 12),
                      Text(
                        s.plan_duration,
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis,
                        softWrap: true,
                        style: TextStyles.textSMedium.copyWith(color: appTheme.black),
                      ),
                      SizedBox(height: 4),
                      PlanDurationDropDownWidget(),
                      SizedBox(height: 20),
                      PlanImagePickerWidget(),
                      SizedBox(height: 16),
                      PlanTypeChoiceWidget(),
                      SizedBox(height: 16),
                      Text(
                        s.plan_desc,
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.ellipsis,
                        softWrap: true,
                        style: TextStyles.textSMedium.copyWith(color: appTheme.black),
                      ),
                      SizedBox(height: 4),
                      SizedBox(
                        height: 132,
                        child: CustomTextFormField(
                          textAlignVertical: TextAlignVertical.top,
                          maxLength: 1000,
                          maxLines: null,
                          minLines: null,
                          expands: true,
                          hintText: s.plan_desc_example,
                          onChanged: (value) {
                            context.read<CreatePlanCubit>().setDetails(value);
                          },
                        ),
                      ),
                      SizedBox(height: 16),
                    ],
                  ),
                ),
                SizedBox(height: 20),
                Padding(
                  padding: const EdgeInsets.only(left: 16),
                  child: Text(
                    s.services,
                    textAlign: TextAlign.center,
                    overflow: TextOverflow.ellipsis,
                    softWrap: true,
                    style: TextStyles.headingXLSemibold.copyWith(color: appTheme.blueGray400),
                  ),
                ),
                SizedBox(height: 8),
                OptionsCountButton(),
                SizedBox(height: 20),
                BlocBuilder<CreatePlanCubit, CreatePlanState>(
                  buildWhen: (previous, current) => previous.selectedOptionIndex != current.selectedOptionIndex,
                  builder: (context, state) {
                    if (state.selectedOptionIndex == null) {
                      return SizedBox.shrink();
                    }
                    return Padding(
                      padding: const EdgeInsets.only(left: 16),
                      child: Text(
                        '${s.option} ${(state.selectedOptionIndex ?? 0) + 1}',
                        style: TextStyles.textLSemibold.copyWith(color: appTheme.blueGray400),
                      ),
                    );
                  },
                ),
                SizedBox(height: 8),
                OptionWidget(),
                SizedBox(height: 20),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: Column(
                    children: [
                      CustomOutlinedButton(
                        onPressed: () {},
                        text: s.to_draft,
                        height: 52,
                        buttonTextStyle: TextStyles.textMSemibold.copyWith(color: appTheme.gray),
                        buttonStyle: ButtonStyle(
                          side: WidgetStatePropertyAll(BorderSide.none),
                          backgroundColor: WidgetStatePropertyAll(appTheme.dottedBorder),
                        ),
                      ),
                      SizedBox(height: 12),
                      CustomOutlinedButton(
                        onPressed: () async {},
                        text: s.preview,
                        height: 52,
                        buttonTextStyle: TextStyles.textMSemibold.copyWith(color: appTheme.gray),
                        buttonStyle: ButtonStyle(
                          side: WidgetStatePropertyAll(BorderSide.none),
                          backgroundColor: WidgetStatePropertyAll(appTheme.dottedBorder),
                        ),
                      ),
                      SizedBox(height: 12),
                      CustomOutlinedButton(
                        onPressed: () {},
                        text: s.publish,
                        height: 52,
                        buttonTextStyle: TextStyles.textMSemibold.copyWith(color: appTheme.whiteA700),
                        buttonStyle: ButtonStyle(
                          side: WidgetStatePropertyAll(BorderSide.none),
                          backgroundColor: WidgetStatePropertyAll(appTheme.blueA400),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          BlocBuilder<CreatePlanCubit, CreatePlanState>(
            builder: (context, state) {
              if (state.selectedOptionIndex == null) {
                return SizedBox.shrink();
              }
              return Padding(
                padding: const EdgeInsets.only(bottom: 24.0),
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: SelectExactOptionWidget(),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}