import 'package:richproject/data/account_data.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart' show Consumer;

import '../tabpages/account_tab.dart';
import '../tabpages/budget_tab.dart';
import '../tabpages/category_tab.dart';

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

  @override
  State<ShopPage> createState() => _ShopPage();
}

class _ShopPage extends State<ShopPage>
    with SingleTickerProviderStateMixin
    implements TickerProvider {
  late TabController _tabController;
  final List<String> tabNames = ['Tab 1', 'Tab 2', 'Tab 3'];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: tabNames.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  List<Widget> _buildTabWidgets() {
    return tabNames.map((name) => Tab(text: name)).toList();
  }

  List<Widget> _buildTabViews() {
    return tabNames
        .map((name) => Center(child: Text('$name content')))
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Consumer<AccountData>(
          builder: (context, value, child) => Scaffold(
                backgroundColor: Colors.grey[200],
                body: Column(
                  children: [
                    // Container(
                    //   padding: EdgeInsets.only(
                    //       top: 20, bottom: 30, left: 20, right: 20),
                    //   child: Align(
                    //       alignment: Alignment.centerLeft,
                    //       child: Text(
                    //         'Manage',
                    //         style: TextStyle(
                    //             fontSize: 23,
                    //             fontWeight: FontWeight.w600,
                    //             color: Colors.blueGrey.shade900),
                    //       )),
                    // ),
                    Container(
                      height: 40,
                      margin: const EdgeInsets.only(
                          left: 20, right: 20, bottom: 30, top: 5),
                      decoration: BoxDecoration(
                          color: Colors.grey[300],
                          borderRadius: BorderRadius.circular(20.0)),
                      child: TabBar(
                        indicator: BoxDecoration(
                          borderRadius:
                              BorderRadius.circular(30), // Creates border
                          //color: Colors.blue.shade600,
                          color: Colors.blueGrey.shade900,
                        ),
                        labelColor: Colors.grey[200],
                        unselectedLabelColor: Colors.blueGrey[900],
                        unselectedLabelStyle: const TextStyle(
                            fontWeight: FontWeight.w400, fontSize: 13),
                        // indicatorWeight: 2.5,
                        // indicatorColor: Colors.blueGrey.shade900,
                        labelStyle: (const TextStyle(
                            fontWeight: FontWeight.w400, fontSize: 13)),
                        controller: _tabController,
                        tabs: _buildTabWidgets(),
                      ),
                    ),
                    Expanded(
                      child: TabBarView(
                        controller: _tabController,
                        children: _buildTabViews(),
                      ),
                    ),
                  ],
                ),
              )),
    );
  }
}