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/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/default_button.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/snack_bar.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) {
              if (state is FailedState) {
                // CustomSnackBar.displaySnackBar(
                // state.errorMessage
                // );
              }
            }, builder: (context, state) {
              return Container(
                padding: EdgeInsets.all(30),
                height: size.height,
                width: size.width,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      width: size.width * 0.3,
                      height: size.height * 0.05,
                      decoration: containerDecoration,
                      child: const Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Text('All'),
                          Text('To Be Effective (0)'),
                          Text('Effective (0)'),
                          Text('Expired'),
                        ],
                      ),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    Wrap(
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Text('User Name'),
                          Container(
                              width: size.width*0.15,
                              decoration: containerDecoration,
                              child: TextFormField(
                                decoration: textBoxDecoration()!
                                    .copyWith(hintText: 'Please enter'),
                              )),
                        ],
                      ),
                      const SizedBox(width: 15,),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          const Text('Email Address'),
                          Container(
                              width: size.width*0.15,
                              decoration: containerDecoration,
                              child: TextFormField(
                                decoration: textBoxDecoration()!
                                    .copyWith(hintText: 'Please enter'),
                              )),
                        ],
                      ),
                      const SizedBox(width: 15,),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          const Text('Access Time'),
                          Container(
                              width: size.width*0.18,
                              padding: EdgeInsets.all(10),
                              decoration: containerDecoration,
                              child: Column(
                                children: [
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      InkWell(child: Text(BlocProvider.of<AccessBloc>(context).startTime)),
                                      const Icon(Icons.arrow_right_alt),
                                      InkWell(child: Text(BlocProvider.of<AccessBloc>(context).endTime)),
                                      SvgPicture.asset(
                                        Assets.calendarIcon,
                                      ),
                                    ],
                                  ),
                                ],
                              )),
                        ],
                      ),
                      const SizedBox(width: 15,),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          const Text('Authorization Source'),
                          Container(
                              width: size.width*0.18,
                              decoration: containerDecoration,
                              child: TextFormField(
                                decoration: textBoxDecoration(),
                              )),
                        ],
                      ),
                      const SizedBox(width: 15,),
                      SizedBox(
                        width: size.width*0.06,
                        child:  Column(
                          children: [
                            Text(''),
                            Container(
                                decoration: containerDecoration,

                                child: DefaultButton(child: Text('Search'),borderRadius: 9)),
                          ],
                        ),
                      ),
                      const SizedBox(width: 10,),
                      SizedBox(
                        width: size.width*0.06,
                        child:  Column(
                          children: [
                            Text(''),
                            Container(
                              decoration: containerDecoration,
                              child: DefaultButton(
                                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: const DefaultButton(
                            borderRadius: 8,
                            child: 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:state is TableLoaded?
                      Container(
                        decoration: containerDecoration,
                        width: size.width,
                        child: Padding(
                          padding: const EdgeInsets.all(10.0),
                          child: ListView(
                            scrollDirection: Axis.horizontal,
                            children: [
                              Container(
                                width: size.width,
                                height:size.height ,
                                child: Column(
                                  children: [

                                    Container(
                                      color: ColorsManager.boxColor,
                                      child: Row(
                                        children: [
                                          _buildTableHeaderCell('Access User'),
                                          _buildTableHeaderCell('Access Type'),
                                          _buildTableHeaderCell('Access Period'),
                                          _buildTableHeaderCell('Accessible Device'),
                                          _buildTableHeaderCell('Authorization Source'),
                                          _buildTableHeaderCell('Authorizer'),
                                          _buildTableHeaderCell('Authorization Time'),
                                          _buildTableHeaderCell('Access Status'),
                                          _buildTableHeaderCell('Actions'),
                                        ],
                                      ),
                                    ),

                                    Expanded(
                                      child: Container(
                                        width: size.width,
                                        color: ColorsManager.whiteColors,
                                        child: ListView(
                                          shrinkWrap: true,
                                          children: [
                                            Column(
                                              children: state.data.map((item) {
                                                return Row(
                                                  children: [
                                                    _buildTableCell(item.accessUser),
                                                    _buildTableCell(item.accessType),
                                                    _buildTableCell(item.accessPeriod),
                                                    _buildTableCell(item.accessibleDevice),
                                                    _buildTableCell(item.authorizationSource),
                                                    _buildTableCell(item.authorizer),
                                                    _buildTableCell(item.authorizationTime),
                                                    _buildTableCell(item.accessStatus),
                                                    _buildTableCell(item.actions),
                                                  ],
                                                );
                                              }).toList(),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ):const Center(child: CircularProgressIndicator())
                    )
                  ],
                ),
              );
            })));
  }
}

Widget _buildTableHeaderCell(String title) {
  return Expanded(
    child: Container(
      decoration: const BoxDecoration(
        border: Border.symmetric(vertical: BorderSide(color: ColorsManager.boxDivider))
      ),
      alignment: Alignment.centerLeft,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(title, style: TextStyle(fontWeight: FontWeight.bold)),
      ),
    ),
  );
}

Widget _buildTableCell(String content) {
  return Expanded(
    child: Container(
      padding: const EdgeInsets.all(20.0),
      decoration: const BoxDecoration(
          border: Border.symmetric(horizontal: BorderSide(color: ColorsManager.boxDivider))
      ),
      alignment: Alignment.centerLeft,
      child: Text(content,style: TextStyle(color: Colors.black,fontSize: 12),),
    ),
  );
}