class ProfileView extends StatelessWidget {
  const ProfileView({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Column(
          children: [
            Container(
              height: 80,
              width: 80,
              decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  image: DecorationImage(
                    image: AssetImage(
                        'assets/img/icon/category_4.png'
                    ),
                  )
              ),
            ),
            Container(
              margin: const EdgeInsets.only(left: 16),
              child: RichText(
                text: const TextSpan(
                    children: [
                      TextSpan(
                          text: 'Dev Clips',
                          style: TextStyle(
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                              fontSize: 16
                          )
                      ),
                      TextSpan(
                          text: 'nFlutter DemonFlutter WebnFlutter Linux',
                          style: TextStyle(
                              color: Colors.black87,
                              fontSize: 14
                          )
                      )
                    ]
                ),
              ),
            ),
          ],
        ),
        Expanded(child: Container(
          margin: const EdgeInsets.symmetric(vertical: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text(
                    '30',
                    style: TextStyle(
                        fontSize: 16,
                        color: Colors.black,
                        fontWeight: FontWeight.bold
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Text(
                      'Posts'
                  )
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text(
                    '130k',
                    style: TextStyle(
                        fontSize: 16,
                        color: Colors.black,
                        fontWeight: FontWeight.bold
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Text(
                      'Followers'
                  )
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text(
                    '130k',
                    style: TextStyle(
                        fontSize: 16,
                        color: Colors.black,
                        fontWeight: FontWeight.bold
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Text(
                      'Following'
                  )
                ],
              ),
            ],
          ),
        ),),
      ],
    );
  }
}

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



  @override
  State<MyMobileBody> createState() => _MyMobileBodyState();
}

class _MyMobileBodyState extends State<MyMobileBody> with TickerProviderStateMixin{

  static const List<String> posts = [
    'assets/img/background/image-5.png',
    'assets/img/background/image-4.jpg',
    'assets/img/background/image-3.jpg',
    'assets/img/map/avatar-1.png',
    'assets/img/map/avatar-3.png',
    'assets/img/map/avatar-5.png',
  ];
  
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: DefaultTabController(
          length: 3,
          child: NestedScrollView(
            physics: const NeverScrollableScrollPhysics(),
            headerSliverBuilder: (context,isScolled){
              return [
                SliverAppBar(
                  backgroundColor: Colors.white,
                  collapsedHeight: MediaQuery.of(context).size.height * 0.25,
                  expandedHeight: MediaQuery.of(context).size.height * 0.25,
                  flexibleSpace: ProfileView(),
                ),
                SliverPersistentHeader(
                  delegate: MyDelegate(
                      const TabBar(
                        tabs: [
                          Tab(icon: Icon(Icons.grid_on)),
                          Tab(icon: Icon(Icons.favorite_border_outlined)),
                          Tab(icon: Icon(Icons.bookmark_border)),
                        ],
                        indicatorColor: Colors.blue,
                        unselectedLabelColor: Colors.grey,
                        labelColor: Colors.black,
                      )
                  ),
                  floating: true,
                  pinned: true,
                )
              ];
            },
            body: TabBarView(
              children: [1,2,3].map((tab) =>
                  GridView.count(
                    physics: const BouncingScrollPhysics(),
                    crossAxisCount: 3,
                    shrinkWrap: true,
                    mainAxisSpacing: 2.0,
                    crossAxisSpacing: 2.0,
                    children: posts.map((e) =>
                        Container(
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: AssetImage(
                                      e
                                  ),
                                  fit: BoxFit.fill
                              )
                          ),
                        )
                    ).toList(),
                  )
              ).toList(),
            ),
          ),
        ),
      ),
    );
  }


}

class MyDelegate extends SliverPersistentHeaderDelegate{
  MyDelegate(this.tabBar);
  final TabBar tabBar;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.white,
      child: tabBar,
    );
  }

  // before scroll
  @override
  double get maxExtent => tabBar.preferredSize.height;

  // after scroll
  @override
  double get minExtent => tabBar.preferredSize.height;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }

}