import 'package:common/localization/l10n_utils.dart';
import 'package:concierge/domain/models/delivery_location.dart';
import 'package:concierge/presentation/screens/provide_location/widgets/provide_location_action_bar.dart';
import 'package:concierge/presentation/theme/app_colors.dart';
import 'package:concierge/presentation/widgets/bevelled_app_bar.dart';
import 'package:concierge/presentation/widgets/padded_column.dart';
import 'package:concierge/presentation/widgets/toggle_list_item.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:concierge/presentation/screens/provide_location/bloc/provide_location_cubit.dart';
import 'package:concierge/presentation/screens/provide_location/bloc/provide_location_state.dart';
import 'package:gap/gap.dart';
import 'package:pin_code_fields/pin_code_fields.dart';

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

  @override
  Widget build(BuildContext context) {
      return BlocBuilder<ProvideLocationCubit, ProvideLocationState>(
      builder: (context, state) {
        final cubit = context.read<ProvideLocationCubit>();
        return Scaffold(
          bottomNavigationBar: ProvideLocationActionBar(),
          body: Stack(
            children: [
              PaddedColumn(
                padding: EdgeInsets.symmetric(horizontal: 16),
                children: [
                  Gap(100),
                  Gap(32),
                  Text(
                    context.strings.provide_location,
                    style: TextStyle(fontSize: 20),
                  ),
                  Gap(48),
                  ToggleListItem(
                    icon: Icons.bed_outlined,
                    title: context.strings.deliver_to_room,
                    subtitle: "${context.strings.room} 345",
                    isSelected: cubit.state.deliveryLocation is Room,
                    onClick: (_) {
                      cubit.updateLocation(DeliveryLocation.room);
                    },
                  ),
                  Gap(12),
                  ToggleListItem(
                    icon: Icons.bed_outlined,
                    title: context.strings.deliver_to_area,
                    subtitle: context.strings.provide_location_code,
                    isSelected: cubit.state.deliveryLocation is Area,
                    onClick: (_) {
                      cubit.updateLocation(DeliveryLocation.area);
                    },
                    onSelectedExtra: Padding(
                      padding: const EdgeInsets.only(top: 24.0),
                      child: MaterialPinField(
                        length: 4,
                        initialValue: cubit.state.deliveryLocationCode,
                        onCompleted: (pin) {},
                        onChanged: (value) {
                          cubit.updateLocationCode(value);
                        },
                        theme: MaterialPinTheme(
                          shape: MaterialPinShape.filled,
                          fillColor: AppColors.sandColor[10],
                          completeFillColor: AppColors.sandColor[10],
                          focusedFillColor: AppColors.sandColor[10],
                          filledFillColor: AppColors.sandColor[10],
                          textStyle: TextStyle(fontSize: 30),
                          cellSize: Size(70, 70),
                          borderRadius: BorderRadius.circular(12),
                        ),
                      ),
                    ),
                  ),
                  Gap(12),
                ],
              ),
              BevelledAppBar(),
            ],
          ),
        );
      },
    );
  }
}