import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:le_kiosque_by_gcs/model/magazine.dart';
import 'package:le_kiosque_by_gcs/ui/custom/item_mag_large.dart';
import 'package:le_kiosque_by_gcs/ui/custom/profile_picture.dart';
import 'package:le_kiosque_by_gcs/ui/view/edit_profil.dart';

class ProfileView extends StatefulWidget {
  @override
  _ProfileViewState createState() => _ProfileViewState();
}

class _ProfileViewState extends State<ProfileView> {
  @override
  Widget build(BuildContext context) {
    // TODO Removig
    final summary =
        "Voyez ce jeu exquis wallon, de graphie en kit mais bref. Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l\"alcôve ovoïde, où les bûches se consument dans l\"âtre";
    final url =
        "https://miningandbusiness.com/wp-content/uploads/2021/02/03f19c3a-1d92-4be7-ac54-f52b37e626ad-561x771.jpg";
    final urlPrd = "http://www.africau.edu/images/default/sample.pdf";

    final magazines = [
      Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary),
      Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary),
      Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary),
      Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary),
      Magazine(urlCover: url, magazineUrl: urlPrd, summaryText: summary)
    ];
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                _buildProfileHeader(),
                SizedBox(height: 24),
                Padding(
                  padding: const EdgeInsets.only(
                    left: 16,
                    top: 34,
                    right: 16,
                    bottom: 16,
                  ),
                  child: Text(
                    "A lire plus tard",
                    style: TextStyle(
                      fontSize: 22,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                )
              ],
            ),
          ),
          SliverPadding(
            padding: EdgeInsets.all(16),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 16.0,
                crossAxisSpacing: 16.0,
                mainAxisExtent: 250
              ),
              delegate: SliverChildBuilderDelegate(
                (context, int index) => ItemMagLarge(magazine: magazines[index]),
                childCount: magazines.length,
              ),
            ),
          ),
        ],
      ),
      floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: Visibility(
        child: FloatingActionButton.extended(
          onPressed: () => _showEditProfileView(context),
          label: const Text(
            'Editer',
            style: TextStyle(
              color: Color(0XFFFF567E),
            ),
          ),
          icon: const Icon(
            Icons.edit,
            color: Color(0XFFFF567E),
          ),
          backgroundColor: Colors.white,
        ),
      ),
    );
  }

  Widget _buildProfileBody() {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        color: Color(0xFFF8F8F8),
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30),
        ),
      ),
    );
  }

  Widget _buildProfileHeader() {
    final imageUrl = FirebaseAuth.instance.currentUser.photoURL;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: ProfilePicture(imageUrl: imageUrl),
          ),
        ),
        Text(
          "Eric Ampire",
          style: TextStyle(
            fontSize: 26,
            color: Colors.black,
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Icon(
                Icons.location_on,
                color: Color(0xFFA5A5A5),
                size: 17,
              ),
            ),
            Text(
              "Lubumbashi",
              style: TextStyle(color: Colors.grey),
            )
          ],
        )
      ],
    );
  }

  _showEditProfileView(BuildContext context) {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (BuildContext context) => EditProfileView(),
      ),
    );
  }
}