import 'package:app_petty_cash/app/constant.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class TransaksiPickDateWidget extends StatelessWidget {
  const TransaksiPickDateWidget(
      {super.key,
      required this.ctrlTglAwal,
      required this.tglAwal,
      required this.tglAwalTmp,
      required this.isLoading});

  final TextEditingController ctrlTglAwal;
  final ValueNotifier<DateTime> tglAwal;
  final ValueNotifier<String> tglAwalTmp;
  final ValueNotifier<bool> isLoading;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: TextField(
            readOnly: true,
            controller: ctrlTglAwal,
            decoration: InputDecoration(
              hintStyle: Constant.body2_400(context: context).copyWith(
                color: Constant.textGreyv2,
              ),
              labelStyle: Constant.body2_400(context: context).copyWith(
                color: Constant.textGreyv2,
              ),
              border: OutlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.orange,
                  width: 1,
                ),
              ),
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  color: Constant.textGreyv2,
                  width: 1,
                ),
              ),

              // labelText: "Tanggal Awal",
              hintText: 'Tanggal Transaksi',
              // suffixIcon: isLoadingFilterScope.value
              //     ? SizedBox(
              //         width: Constant.getActualXPhone(
              //           context: context,
              //           x: 4,
              //         ),
              //         height: Constant.getActualYPhone(
              //           context: context,
              //           y: 4,
              //         ),
              //         child: CircularProgressIndicator(
              //           color: Constant.textRed,
              //         ),
              //       )
              //     : Icon(
              //         Icons.calendar_month_sharp,
              //         color: Constant.colorIconDate,
              //       ),
            ),
            onTap: !isLoading.value
                ? () async {
                    final selectedDateAwal = await showDatePicker(
                      keyboardType: TextInputType.none,
                      // locale: const Locale("en-CA"),
                      // locale: ,
                      context: context,
                      initialEntryMode: DatePickerEntryMode.calendarOnly,
                      firstDate: DateTime(2000),
                      lastDate: DateTime(2100),

                      initialDate: (ctrlTglAwal.text.isEmpty)
                          ? DateTime.now()
                          : tglAwal.value,
                    );

                    if (selectedDateAwal != null) {
                      String formattedDate =
                          DateFormat('dd-MM-yyyy').format(selectedDateAwal);
                      // ctrlTglAwal.text =
                      //     selectedDateAwal.toString().split(' ')[0];
                      ctrlTglAwal.text = formattedDate;
                      tglAwal.value = selectedDateAwal;
                      tglAwalTmp.value = selectedDateAwal.toString();
                    }

                    if (selectedDateAwal == null) {
                      print('cancel button');
                      return;
                    }
                  }
                : null,
          ),
        ),
      ],
    );
  }
}
