part of 'pages.dart';

class CardPage extends StatefulWidget {
  const CardPage({ Key? key }) : super(key: key);
  static const routeName = '/card_page';

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

class _CardPageState extends State<CardPage> with SingleTickerProviderStateMixin {
  late TabController tabController;

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

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

  bool fav = false;
  bool fav1 = false;
  bool fav2 = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: LLSColors.PRIMARY,
        leading: InkWell(
          onTap: () {
            Navigator.pop(context);
          },
          child: Icon(
            CupertinoIcons.back,
            color: LLSColors.WHITE,
          ),
        ),
        title: const Text(
          'Card',
          style: TextStyle(fontSize: 17),
        ),
        centerTitle: true,
      ),
      body: ListView(
        children: <Widget>[
          Container(
            width: double.infinity,
            height: 45,
            margin: const EdgeInsets.only(top: 20, left: 25, right: 25),
            padding: EdgeInsets.zero,
            child: LLSSegmentTabs(
              tabController: tabController,
              width: double.infinity,
              length: 3,
              tabs: const <Widget>[
                Tab(
                  child: Text(
                    'Basic',
                    style: TextStyle(fontSize: 15),
                  ),
                ),
                Tab(
                  child: Text(
                    'Avatar',
                    style: TextStyle(fontSize: 15),
                  ),
                ),
                Tab(
                  child: Text(
                    'Full Image',
                    style: TextStyle(fontSize: 15),
                  ),
                ),
              ],
              tabBarColor: LLSColors.LIGHT,
              indicatorSize: TabBarIndicatorSize.tab,
              labelColor: LLSColors.WHITE,
              unselectedLabelColor: LLSColors.DARK,
              indicator: BoxDecoration(
                color: LLSColors.SECONDARY,
                border: Border(
                  bottom: BorderSide(
                    color: LLSColors.SUCCESS,
                    width: 4,
                  ),
                ),
              ),
              indicatorWeight: 2,
              border: Border.all(color: Colors.white, width: 2),
            ),
          ),
          Container(
            height: MediaQuery.of(context).size.height - 140,
            child: LLSTabBarView(
              controller: tabController,
              physics: BouncingScrollPhysics(),
              children: <Widget>[
                Container(
                  child: ListView(
                    children: <Widget>[
                      LLSCard(
                        padding: EdgeInsets.zero,
                        boxFit: BoxFit.cover,
                        image: Image.asset(
                          'assets/images/card1.png',
                          width: MediaQuery.of(context).size.width,
                          fit: BoxFit.fitWidth,
                        ),
                        titlePosition: LLSPosition.end,
                        title: LLSListTile(
                          titleText: 'Card Title',
                          icon: LLSIconButton(
                            size: LLSSize.SMALL,
                            onPressed: () {
                              setState(() {
                                fav = !fav;
                              });
                            },
                            icon: fav
                              ? Icon(
                                  Icons.favorite,
                                  color: LLSColors.DANGER,
                                  size: LLSSize.SMALL
                                )
                              : Icon(
                                Icons.favorite_border,
                                size: LLSSize.SMALL
                              ),
                            type: LLSButtonType.transparent,
                          ),
                        ),
                        content: Text(
                          'Some quick example text to build on the card',
                          style: TextStyle(color: Colors.grey),
                        ),
                        buttonBar: LLSButtonBar(
                          padding: const EdgeInsets.symmetric(vertical: 10),
                          children: <Widget>[
                            LLSButton(
                              onPressed: () {},
                              text: 'Read More',
                            ),
                            LLSButton(
                              onPressed: () {},
                              text: 'Share',
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                  child: ListView(
                    children: <Widget>[
                      LLSCard(
                        padding: EdgeInsets.zero,
                        boxFit: BoxFit.fill,
                        image: Image.asset(
                          'assets/images/card3.png',
                          width: MediaQuery.of(context).size.width,
                          fit: BoxFit.fitWidth,
                        ),
                        titlePosition: LLSPosition.end,
                        title: LLSListTile(
                          avatar: LLSAvatar(
                            backgroundImage: AssetImage('assets/images/avatar.png'),
                            shape: LLSAvatarShape.circle,                          
                          ),
                          titleText: 'Card Title',
                          icon: LLSIconButton(
                            size: LLSSize.SMALL,
                            onPressed: () {
                              setState(() {
                                fav2 = !fav2;
                              });
                            },
                            icon: fav2
                              ? Icon(
                                  Icons.favorite,
                                  color: LLSColors.DANGER,
                                  size: LLSSize.SMALL
                                )
                              : Icon(
                                Icons.favorite_border,
                                size: LLSSize.SMALL
                              ),
                            type: LLSButtonType.transparent,
                          ),
                        ),
                        content: Container(
                          padding: EdgeInsets.only(bottom: 20),
                          child: Text(
                            'Some quick example text to build on the card',
                            style: TextStyle(color: Colors.grey),
                          ),
                        )
                      )
                    ],
                  ),
                ),
                Container(
                  child: ListView(
                    children: <Widget>[
                      LLSCard(
                        boxFit: BoxFit.cover,
                        colorFilter: ColorFilter.mode( Colors.black.withOpacity(0.45), BlendMode.darken),
                        imageOverlay: const AssetImage('assets/images/card5.png'),
                        showOverlayImage: true,
                        title: LLSListTile(
                          avatar: const LLSAvatar(
                            backgroundImage: AssetImage('assets/images/avatar.png'),
                            shape: LLSAvatarShape.circle,
                          ),
                          title: Text(
                            'Card Title',
                            style: TextStyle(
                              color: Colors.grey,
                              fontWeight: FontWeight.w500),
                          ),
                          subTitle: Text(
                            'subtitle',
                            style: TextStyle(color: Colors.grey),
                          ),
                        ),
                        content: Container(
                          padding: EdgeInsets.only(bottom: 10),
                          child: Text(
                            'Some quick example text to build on the card',
                            style: TextStyle(color: Colors.grey),
                          ),
                        )
                      ),
                    ],
                  ),
                ),
              ]
            )
          )
        ]
      )
    );
  }
}