import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/Project/HomePage/product_display.dart';
import 'package:flutter_application_1/Project/HomePage/top_container.dart';

import 'categories_display.dart';

class HomeDisplayScreen extends StatefulWidget {
  const HomeDisplayScreen({Key? key}) : super(key: key);

  @override
  _HomeDisplayScreenState createState() => _HomeDisplayScreenState();
}

class _HomeDisplayScreenState extends State<HomeDisplayScreen>
    with SingleTickerProviderStateMixin {
  late TabController tabController;
  int selectedValue = 0;
  int currentIndex = 0;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 2, vsync: this, initialIndex: 0);
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<DocumentSnapshot>(
      stream: FirebaseFirestore.instance
          .collection('users')
          .doc(FirebaseAuth.instance.currentUser!.uid)
          .snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }

        final data = snapshot.data!;

        return SingleChildScrollView(
          padding: const EdgeInsets.symmetric(vertical: 30.0, horizontal: 30.0),
          child: Column(
            children: [
              TopContainer(
                title: 'Hello ${data.get('firstName')} ${data.get('lastName').substring(0, 1)}.'
                            .length >
                        15
                    ? '${'Hello ${data.get('firstName')} ${data.get('lastName').substring(0, 1)}.'
                            .substring(0, 14)}...'
                    : 'Hello ${data.get('firstName')} ${data.get('lastName').substring(0, 1)}.',
                searchBarTitle: "Search Product",
              ),
              //tap bar
              TabBar(
                controller: tabController,
                indicatorColor: Colors.transparent,
                labelColor: Colors.white,
                unselectedLabelColor: Colors.black,
                indicatorSize: TabBarIndicatorSize.label,
                onTap: (value) {
                  setState(() {
                    selectedValue = value;
                  });
                  tabController.animateTo(value);
                },
                tabs: [
                  Container(
                    width: double.infinity,
                    height: 50,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(30),
                      color:
                          selectedValue == 0 ? Colors.black : Colors.grey[300],
                      boxShadow: selectedValue == 0
                          ? [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.3),
                                spreadRadius: 1,
                                blurRadius: 5,
                                offset: const Offset(0, 1),
                              ),
                            ]
                          : null,
                    ),
                    child: const Text(
                      "All Products",
                      textAlign: TextAlign.center,
                    ),
                  ),
                  Container(
                    width: double.infinity,
                    height: 50,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(30),
                      color:
                          selectedValue == 1 ? Colors.black : Colors.grey[300],
                      boxShadow: selectedValue == 1
                          ? [
                              BoxShadow(
                                color: Colors.grey.withOpacity(0.3),
                                spreadRadius: 1,
                                blurRadius: 5,
                                offset: const Offset(0, 1),
                              ),
                            ]
                          : null,
                    ),
                    child: const Text(
                      "Categories",
                      textAlign: TextAlign.center,
                    ),
                  ),
                ],
              ),
              //tab bar view
              SizedBox(
                height: MediaQuery.of(context).size.height,
                child: TabBarView(
                  physics: const NeverScrollableScrollPhysics(),
                  controller: tabController,
                  children: const [
                    ProductDisplayWidget(),
                    CategoriesDisplay(),
                  ],
                ),
              )
            ],
          ),
        );
      },
    );
  }
}