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

import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/non_bookable_spaces_bloc/non_bookaable_spaces_bloc.dart';

import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';

class TimePickerWidget extends StatefulWidget {
  const TimePickerWidget({
    super.key,
    required this.onTimePicked,
  });

  final void Function(TimeOfDay? timePicked) onTimePicked;
  @override
  State<TimePickerWidget> createState() => _TimePickerWidgetState();
}

class _TimePickerWidgetState extends State<TimePickerWidget> {
  TimeOfDay? timePicked;
  @override
  Widget build(BuildContext context) {
    return InkWell(
      borderRadius: BorderRadius.circular(10),
      onTap: () async {
        final tempTime = await showTimePicker(
          context: context,
          initialTime: TimeOfDay.now(),
          builder: (context, child) {
            return Theme(
              data: ThemeData.light().copyWith(
                colorScheme: const ColorScheme.light(
                  primary: ColorsManager.primaryColor,
                  onSurface: Colors.black,
                ),
              ),
              child: child!,
            );
          },
        );
        widget.onTimePicked(tempTime);
        timePicked = tempTime;
        context.read<NonBookableSpacesBloc>().add(CheckConfigurValidityEvent());
        setState(() {});
      },
      child: Row(
        children: [
          Container(
            width: 56,
            height: 32,
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10),
                bottomLeft: Radius.circular(10),
              ),
            ),
            alignment: Alignment.center,
            child: SvgPicture.asset(Assets.clockIcon),
          ),
          Container(
            width: 120,
            height: 32,
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(10),
                bottomRight: Radius.circular(10),
              ),
            ),
            alignment: Alignment.centerLeft,
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: Text(
              timePicked == null ? 'HH:MM' : timePicked!.format(context),
              style: const TextStyle(color: Color(0xB2D5D5D5)),
            ),
          ),
        ],
      ),
    );
  }
}
