import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/access_management/bloc/access_bloc.dart';
import 'package:syncrow_web/pages/access_management/bloc/access_event.dart';
import 'package:syncrow_web/pages/access_management/bloc/access_state.dart';
import 'package:syncrow_web/pages/common/custom_table.dart';
import 'package:syncrow_web/pages/common/date_time_widget.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/pages/common/filter/filter_widget.dart';
import 'package:syncrow_web/pages/visitor_password/view/visitor_password_dialog.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/constants/const.dart';
import 'package:syncrow_web/utils/style.dart';
import 'package:syncrow_web/web_layout/web_scaffold.dart';

class AccessManagementPage extends StatelessWidget {
  const AccessManagementPage({super.key});
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return WebScaffold(
        enableMenuSideba: false,
        appBarTitle: Row(
          children: [
            Text(
              'Access Management',
              style: Theme.of(context).textTheme.headlineLarge,
            )
          ],
        ),
        appBarBody: [
          Text(
            'Physical Access',
            style: Theme.of(context)
                .textTheme
                .headlineMedium!
                .copyWith(color: Colors.white),
          ),
        ],
        scaffoldBody: BlocProvider(
            create: (BuildContext context) =>
                AccessBloc()..add(FetchTableData()),
            child: BlocConsumer<AccessBloc, AccessState>(
                listener: (context, state) {},
                builder: (context, state) {
                  final accessBloc = BlocProvider.of<AccessBloc>(context);
                  final filteredData = accessBloc.filteredData;
                  return state is AccessLoaded
                      ? const Center(child: CircularProgressIndicator())
                      : Container(
                          padding: EdgeInsets.all(30),
                          height: size.height,
                          width: size.width,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Container(
                                decoration: containerDecoration,
                                height: size.height * 0.05,
                                child: Flexible(
                                  child: ListView.builder(
                                    scrollDirection: Axis.horizontal,
                                    itemCount:
                                        BlocProvider.of<AccessBloc>(context)
                                            .tabs
                                            .length,
                                    shrinkWrap: true,
                                    itemBuilder: (context, index) {
                                      final isSelected = index ==
                                          BlocProvider.of<AccessBloc>(context)
                                              .selectedIndex;
                                      return InkWell(
                                        onTap: () {
                                          BlocProvider.of<AccessBloc>(context)
                                              .add(TabChangedEvent(index));
                                        },
                                        child: Container(
                                          decoration: BoxDecoration(
                                            color: ColorsManager.boxColor,
                                            border: Border.all(
                                              color: isSelected
                                                  ? Colors.blue
                                                  : Colors.transparent,
                                              width: 2.0,
                                            ),
                                            borderRadius: index == 0
                                                ? const BorderRadius.only(
                                                    topLeft:
                                                        Radius.circular(10),
                                                    bottomLeft:
                                                        Radius.circular(10))
                                                : index == 3
                                                    ? const BorderRadius.only(
                                                        topRight:
                                                            Radius.circular(10),
                                                        bottomRight:
                                                            Radius.circular(10))
                                                    : null,
                                          ),
                                          padding: const EdgeInsets.only(
                                              left: 10, right: 10),
                                          child: Center(
                                            child: Text(
                                              BlocProvider.of<AccessBloc>(
                                                      context)
                                                  .tabs[index],
                                              style: TextStyle(
                                                color: isSelected
                                                    ? Colors.blue
                                                    : Colors.black,
                                              ),
                                            ),
                                          ),
                                        ),
                                      );
                                    },
                                  ),
                                ),
                              ),
                              const SizedBox(
                                height: 20,
                              ),
                              Row(
                                mainAxisSize: MainAxisSize.min,
                                crossAxisAlignment: CrossAxisAlignment.end,
                                textBaseline: TextBaseline.ideographic,
                                children: [
                                  Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text(
                                        'Name',
                                        style: Theme.of(context)
                                            .textTheme
                                            .bodySmall!
                                            .copyWith(
                                                color: Colors.black,
                                                fontSize: 13),
                                      ),
                                      const SizedBox(
                                        height: 5,
                                      ),
                                      Container(
                                          height: 43,
                                          width: size.width * 0.15,
                                          decoration: containerDecoration,
                                          child: TextFormField(
                                            controller: accessBloc.passwordName,
                                            style: const TextStyle(
                                                color: Colors.black),
                                            decoration: textBoxDecoration()!
                                                .copyWith(
                                                    hintText: 'Please enter'),
                                          )),
                                    ],
                                  ),
                                  const SizedBox(
                                    width: 15,
                                  ),
                                  DateTimeWebWidget(
                                    icon: Assets.calendarIcon,
                                    isRequired: false,
                                    title: 'Access Time',
                                    size: size,
                                    endTime: () {
                                      accessBloc.add(SelectTime(
                                          context: context, isStart: false));
                                    },
                                    startTime: () {
                                      accessBloc.add(SelectTime(
                                          context: context, isStart: true));
                                    },
                                    firstString:
                                        BlocProvider.of<AccessBloc>(context)
                                            .startTime,
                                    secondString:
                                        BlocProvider.of<AccessBloc>(context)
                                            .endTime,
                                  ),
                                  const SizedBox(
                                    width: 15,
                                  ),
                                  SizedBox(
                                    height: 45,
                                    width: size.width * 0.06,
                                    child: Container(
                                        decoration: containerDecoration,
                                        child: DefaultButton(
                                            onPressed: () {
                                              accessBloc.add(FilterDataEvent(
                                                  selectedTabIndex: BlocProvider
                                                          .of<AccessBloc>(
                                                              context)
                                                      .selectedIndex, // Pass the selected tab index
                                                  passwordName: accessBloc
                                                      .passwordName.text
                                                      .toLowerCase(),
                                                  startTime: accessBloc
                                                      .effectiveTimeTimeStamp,
                                                  endTime: accessBloc
                                                      .expirationTimeTimeStamp));
                                            },
                                            borderRadius: 9,
                                            child: const Text('Search'))),
                                  ),
                                  const SizedBox(
                                    width: 10,
                                  ),
                                  SizedBox(
                                    height: 45,
                                    width: size.width * 0.06,
                                    child: Container(
                                      decoration: containerDecoration,
                                      child: DefaultButton(
                                        onPressed: () {
                                          accessBloc.add(ResetSearch());
                                        },
                                        backgroundColor:
                                            ColorsManager.whiteColors,
                                        borderRadius: 9,
                                        child: Text(
                                          'Reset',
                                          style: Theme.of(context)
                                              .textTheme
                                              .bodySmall!
                                              .copyWith(color: Colors.black),
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              const SizedBox(
                                height: 20,
                              ),
                              Wrap(
                                children: [
                                  Container(
                                    width: size.width * 0.15,
                                    decoration: containerDecoration,
                                    child: DefaultButton(
                                        onPressed: () {
                                          showDialog(
                                            context: context,
                                            barrierDismissible: false,
                                            builder: (BuildContext context) {
                                              return const VisitorPasswordDialog();
                                            },
                                          ).then((v) {
                                            if (v != null) {
                                              accessBloc.add(FetchTableData());
                                            }
                                          });
                                        },
                                        borderRadius: 8,
                                        child: const Text(
                                            '+    Create Visitor Password ')),
                                  ),
                                  const SizedBox(
                                    width: 10,
                                  ),
                                  Container(
                                      width: size.width * 0.12,
                                      decoration: containerDecoration,
                                      child: DefaultButton(
                                          borderRadius: 8,
                                          backgroundColor:
                                              ColorsManager.whiteColors,
                                          child: Text(
                                            'Admin Password',
                                            style: Theme.of(context)
                                                .textTheme
                                                .bodySmall!
                                                .copyWith(color: Colors.black),
                                          )))
                                ],
                              ),
                              const SizedBox(
                                height: 20,
                              ),
                              Expanded(
                                  child: DynamicTable(
                                isEmpty: filteredData.isEmpty,
                                withCheckBox: false,
                                size: size,
                                cellDecoration: containerDecoration,
                                headers: const [
                                  'Name',
                                  'Access Type',
                                  'Access Period',
                                  'Accessible Device',
                                  'Authorizer',
                                  'Authorization Date & Time',
                                  'Access Status'
                                ],
                                data: filteredData.map((item) {
                                  return [
                                    item.passwordName.toString(),
                                    item.passwordType.value,
                                    ('${accessBloc.timestampToDate(item.effectiveTime)} - ${accessBloc.timestampToDate(item.invalidTime)}'),
                                    item.deviceUuid.toString(),
                                    '',
                                    '',
                                    item.passwordStatus.value
                                  ];
                                }).toList(),
                              )
                                  // : const Center(child: CircularProgressIndicator()),
                                  )
                            ],
                          ),
                        );
                })));
  }
}