import 'bloc/language_select_bloc.dart';
import 'models/language_select_model.dart';
import 'package:eatvio_app/core/app_export.dart';
import 'package:eatvio_app/widgets/custom_drop_down.dart';
import 'package:eatvio_app/widgets/custom_outlined_button.dart';
import 'package:flutter/material.dart';

class LanguageSelectScreen extends StatelessWidget {
  const LanguageSelectScreen({Key? key})
      : super(
          key: key,
        );

  static Widget builder(BuildContext context) {
    return BlocProvider<LanguageSelectBloc>(
      create: (context) => LanguageSelectBloc(LanguageSelectState(
        languageSelectModelObj: LanguageSelectModel(),
      ))
        ..add(LanguageSelectInitialEvent()),
      child: LanguageSelectScreen(),
    );
  }

  @override
  Widget build(BuildContext context) {
    mediaQueryData = MediaQuery.of(context);

    return SafeArea(
      child: Scaffold(
        body: Container(
          width: double.maxFinite,
          padding: EdgeInsets.symmetric(
            horizontal: 16.h,
            vertical: 5.v,
          ),
          child: Column(
            children: [
              CustomImageView(
                imagePath: ImageConstant.imgLogoEatvio,
                height: 50.adaptSize,
                width: 50.adaptSize,
              ),
              SizedBox(height: 20.v),
              _buildProgressIndicatorSection(context),
              SizedBox(height: 20.v),
              Container(
                width: 262.h,
                margin: EdgeInsets.only(
                  left: 41.h,
                  right: 39.h,
                ),
                child: Text(
                  "msg17".tr,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  textAlign: TextAlign.center,
                  style: theme.textTheme.headlineSmall,
                ),
              ),
              Spacer(
                flex: 36,
              ),
              BlocSelector<LanguageSelectBloc, LanguageSelectState,
                  LanguageSelectModel?>(
                selector: (state) => state.languageSelectModelObj,
                builder: (context, languageSelectModelObj) {
                  return CustomDropDown(
                    icon: Container(
                      margin: EdgeInsets.fromLTRB(30.h, 11.v, 17.h, 11.v),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(
                          1.h,
                        ),
                      ),
                      child: CustomImageView(
                        imagePath: ImageConstant.imgFavorite,
                        height: 12.adaptSize,
                        width: 12.adaptSize,
                      ),
                    ),
                    hintText: "lbl_english".tr,
                    items: languageSelectModelObj?.dropdownItemList ?? [],
                    onChanged: (value) {
                      context
                          .read<LanguageSelectBloc>()
                          .add(ChangeDropDownEvent(value: value));
                    },
                  );
                },
              ),
              Spacer(
                flex: 63,
              ),
            ],
          ),
        ),
        bottomNavigationBar: _buildContinueButtonSection(context),
      ),
    );
  }

  /// Section Widget
  Widget _buildProgressIndicatorSection(BuildContext context) {
    return Container(
      width: 343.h,
      padding: EdgeInsets.symmetric(
        horizontal: 4.h,
        vertical: 3.v,
      ),
      decoration: AppDecoration.outlinePrimary.copyWith(
        borderRadius: BorderRadiusStyle.circleBorder8,
      ),
      child: Container(
        height: 8.v,
        width: 20.h,
        decoration: BoxDecoration(
          color: appTheme.blueA400,
          borderRadius: BorderRadius.circular(
            4.h,
          ),
          border: Border.all(
            color: theme.colorScheme.primary,
            width: 1.h,
          ),
        ),
      ),
    );
  }

  /// Section Widget
  Widget _buildContinueButtonSection(BuildContext context) {
    return CustomOutlinedButton(
      text: "lbl2".tr.toUpperCase(),
      margin: EdgeInsets.only(
        left: 16.h,
        right: 16.h,
        bottom: 50.v,
      ),
      buttonStyle: CustomButtonStyles.outlinePrimaryTL15,
    );
  }
}