import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';

import 'package:easy_localization/easy_localization.dart';

import 'package:carma/utils/styles.dart';

class UserPage extends StatefulWidget {
  @override
  _SliverWithTabBarState createState() => _SliverWithTabBarState();
}

class _SliverWithTabBarState extends State<UserPage> with SingleTickerProviderStateMixin {
  TabController controller;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
          brightness: Brightness.dark,
          title: Text('user.title'.tr(), style: Styles.primaryTitleStyle),
          centerTitle: false,
          elevation: 0,
          actions: <Widget>[
            IconButton(
              icon: SvgPicture.asset('assets/images/icons/icon_cog.svg'),
              onPressed: () {

              },
            ),
          ],
        ),
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return [
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverAppBar(
                actions: <Widget>[
                  IconButton(
                    icon: SvgPicture.asset('assets/images/icons/icon_cog.svg'),
                    onPressed: () {

                    },
                  ),
                ],
                pinned: true,
                backgroundColor: Styles.whiteColor,
                expandedHeight: 286.0,
                flexibleSpace: FlexibleSpaceBar(
                  titlePadding: EdgeInsets.zero,
                  collapseMode: CollapseMode.pin,
                  background: buildInfo()
                ),
                forceElevated: innerBoxIsScrolled,
                bottom: TabBar(
                  controller: controller,
                  labelColor: Styles.segmentedSelectedColor,
                  unselectedLabelColor: Styles.segmentedNormalColor,
                  indicatorColor: Styles.primaryColor,
                  indicatorWeight: 2.0,
                  labelStyle: TextStyle(
                    fontFamily: 'NotoSans',
                    fontSize: 14.0,
                    fontWeight: FontWeight.w500
                  ),
                  tabs: [
                    Tab(text: 'car.rating.dislikes'.tr().toUpperCase()),
                    Tab(text: 'car.rating.likes'.tr().toUpperCase()),
                  ],
                ),
              ),
            ),
          ];
        },
        body: TabBarView(
          controller: controller,
          children: [
            SafeArea(
              top: false,
              bottom: false,
              child: Builder(
                builder: (BuildContext context) {
                  return CustomScrollView(
                    key: PageStorageKey<String>('test'),
                    slivers: <Widget>[
                      SliverOverlapInjector(
                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                      ),
                      SliverPadding(
                        padding: const EdgeInsets.all(8.0),
                        sliver: SliverFixedExtentList(
                          itemExtent: 48.0,
                          delegate: SliverChildBuilderDelegate(
                            (BuildContext context, int index) {
                              return ListTile(
                                title: Text('Item $index'),
                              );
                            },
                            childCount: 30,
                          ),
                        ),
                      ),
                    ],
                  );
                },
              ),
            ),
            SafeArea(
              top: false,
              bottom: false,
              child: Builder(
                builder: (BuildContext context) {
                  return CustomScrollView(
                    key: PageStorageKey<String>('test'),
                    slivers: <Widget>[
                      SliverOverlapInjector(
                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                      ),
                      SliverPadding(
                        padding: const EdgeInsets.all(0),
                        sliver: SliverFixedExtentList(
                          itemExtent: 48.0,
                          delegate: SliverChildBuilderDelegate(
                            (BuildContext context, int index) {
                              return ListTile(
                                title: Text('Item $index'),
                              );
                            },
                            childCount: 30,
                          ),
                        ),
                      ),
                    ],
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildInfo() {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
      color: Styles.whiteColor,
      width: double.infinity,
      height: 234,
      child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            width: 150,
            height: 150,
            child: Stack(
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(75),
                  child: Image.asset('assets/images/other/userpic.jpg', width: 150, height: 150),
                ),
                Positioned(
                  bottom: 0,
                  right: 0,
                  child: Container(
                    width: 44,
                    height: 44,
                    padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                    decoration: BoxDecoration(
                      color: Styles.grayColor,
                      borderRadius: BorderRadius.circular(22),
                    ),
                    child: SvgPicture.asset(
                      'assets/images/icons/icon_social_facebook.svg',
                      color: Styles.blueColor,
                    )
                  ),
                )
              ],
            ),
          ),
          SizedBox(height: 16),
          Text(
            'Константин Константинопольский',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontFamily: 'NotoSans',
              fontSize: 16.0,
              fontWeight: FontWeight.w500,
              color: Styles.darkColor
            ),
          ),
          SizedBox(height: 12),
        ]
      )
    );
  }
}