import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../../../../application/refund/refund_form/refund_form_bloc.dart';
import '../../../../common/data/refund_data.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/border/dashed_border.dart';
import '../../../components/button/button.dart';
import '../../../components/field/field.dart';
import '../../../components/spaces/space.dart';
import '../../../components/toast/flushbar.dart';
import 'refund_reasong_tile.dart';

class RefundRightPanel extends StatefulWidget {
  final RefundFormState state;
  const RefundRightPanel({super.key, required this.state});

  @override
  State<RefundRightPanel> createState() => _RefundRightPanelState();
}

class _RefundRightPanelState extends State<RefundRightPanel> {
  TextEditingController reasonController = TextEditingController();

  @override
  void initState() {
    super.initState();
    reasonController.addListener(() {
      context.read<RefundFormBloc>().add(
        RefundFormEvent.reasonChanged(reasonController.text),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          child: SingleChildScrollView(
            padding: EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Konfigurasi Refund',
                  style: AppStyle.h5.copyWith(
                    fontWeight: FontWeight.bold,
                    color: AppColor.textPrimary,
                  ),
                ),
                SpaceHeight(16),
                Container(
                  width: context.deviceWidth,
                  padding: EdgeInsets.all(16),
                  decoration: BoxDecoration(
                    color: AppColor.white,
                    borderRadius: BorderRadius.circular(16),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Pilih Alasan Refund',
                        style: AppStyle.lg.copyWith(
                          fontWeight: FontWeight.w600,
                          color: AppColor.primary,
                        ),
                      ),
                      SpaceHeight(8),
                      GridView.builder(
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3,
                          crossAxisSpacing: 12,
                          mainAxisSpacing: 12,
                          childAspectRatio: 2.5,
                        ),
                        itemCount: refundReasons.length,
                        itemBuilder: (context, index) {
                          final reason = refundReasons[index];
                          final isSelected =
                              widget.state.refundReason == reason;

                          return RefundReasonTile(
                            isSelected: isSelected,
                            reason: reason,
                            onTap: () {
                              context.read<RefundFormBloc>().add(
                                RefundFormEvent.refundReasonChanged(reason),
                              );
                            },
                          );
                        },
                      ),
                      if (widget.state.refundReason != null &&
                          widget.state.refundReason!.value == 'Lainnya') ...[
                        SpaceHeight(8),
                        AppTextFormField(
                          label: 'Masukkan Alasan',
                          controller: reasonController,
                          showLabel: false,
                          maxLines: 3,
                        ),
                      ],
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
        _buildBottom(),
      ],
    );
  }

  Widget _buildBottom() {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(color: AppColor.white),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Total Refund',
                style: AppStyle.lg.copyWith(
                  fontWeight: FontWeight.w600,
                  color: AppColor.primary,
                ),
              ),
              Text(
                widget.state.order.totalAmount.currencyFormatRpV2,
                style: AppStyle.lg.copyWith(
                  fontWeight: FontWeight.w600,
                  color: AppColor.primary,
                ),
              ),
            ],
          ),
          SpaceHeight(8),
          DashedDivider(color: AppColor.border),
          SpaceHeight(16),
          Row(
            children: [
              Expanded(
                child: AppElevatedButton.outlined(
                  onPressed: () => context.router.maybePop(),
                  label: 'Batal',
                ),
              ),
              SpaceWidth(16),
              Expanded(
                child: AppElevatedButton.filled(
                  onPressed: () {
                    if (widget.state.refundReason == null) {
                      AppFlushbar.showError(context, 'Pilih alasan refund');

                      return;
                    }
                    context.read<RefundFormBloc>().add(
                      const RefundFormEvent.submitted(),
                    );
                  },
                  isLoading: widget.state.isSubmitting,
                  label: 'Konfirmasi Refund',
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}