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

import '../../../../data/utils/Pagination.dart';
import '../../../layouts/main_layout.dart';
import '../../../themes/indicators/export_btn.dart';
import '../../../themes/indicators/search_field_theme.dart';

class SampleList extends StatefulWidget {
  const SampleList({super.key});
  @override
  AgentListState createState() => AgentListState();
}

class SampleListState extends State<SampleList> {
  int currentPage = 0;
  int itemsPerPage = 10;

  List<Map<String, dynamic>> dataVal = [];

  final TextEditingController _searchController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return MainLayout(
      title: "Agent",
      body: Container(
        // color: Colors.yellow.shade50,
        width: MediaQuery.of(context).size.width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              // height: 30,
              // color: Colors.red.shade50,
              width: MediaQuery.of(context).size.width,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Icon(
                    Icons.arrow_left_sharp,
                    size: 35,
                    color: Color(0xFF425B5B),
                  ),
                  Text(
                    "Agent",
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
                  ),
                ],
              ),
            ),

            SizedBox(height: 10),
            Expanded(
              child: Container(
                // color: Colors.green,
                color: Colors.green.shade50,
                width: MediaQuery.of(context).size.width,

                padding: EdgeInsets.all(8.0),
                child: Column(
                  children: [
                    Container(
                      // height: 40,
                      // color: Colors.pink,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          ThemedSearchField(
                            hintText: 'Search',
                            backgroundColor: Color(0xFFF6F8F8),
                            controller: _searchController,
                            txtwidth: MediaQuery.of(context).size.width * 0.2,
                          ),
                          Text("Home Page Content 2"),

                          Spacer(),

                          ExportBtn(),
                          SizedBox(width: 10),
                          GestureDetector(
                            onTap: () {
                              print('Export');
                            },
                            child: Container(
                              padding: EdgeInsets.all(8.0),
                              decoration: BoxDecoration(
                                color: Color(0xFF425B5B),
                                borderRadius: BorderRadius.circular(8.0),
                              ),
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Icon(Icons.add, color: Colors.white),

                                  SizedBox(width: 10),

                                  Text(
                                    'Create New Agent',
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontWeight: FontWeight.w600,
                                      fontSize: 14,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),

            Container(
              // height: 20,
              width: MediaQuery.of(context).size.width,
              // color: Colors.green.shade50,
              child: PaginationControls(
                currentPage: currentPage,
                itemsPerPage: itemsPerPage,
                totalItems: dataVal.length,
                // activeColor: layoutColor, // your theme color
                onPageChanged: (page) {
                  setState(() {
                    currentPage = page;
                  });
                },
                onItemsPerPageChanged: (items) {
                  setState(() {
                    itemsPerPage = items;
                    currentPage = 0;
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}