import 'package:douyin_demo/providers/recommend_provider.dart';
import 'package:douyin_demo/views/rotate_album.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:provider/provider.dart';

import 'btn_content.dart';
import 'button_list.dart';
import 'center_image.dart';

class SwiperMain extends StatefulWidget {
  SwiperMain({Key? key, required this.type}) : super(key: key);
  final String type;

  _SwiperMainState createState() => _SwiperMainState();
}

class _SwiperMainState extends State<SwiperMain>
    with AutomaticKeepAliveClientMixin {
      
  @override
  Widget build(BuildContext context) {
    RecommendProvider provider = Provider.of<RecommendProvider>(context);
    List<MainInfo> infos = <MainInfo>[];
    if (widget.type == "followed") {
      infos = provider.followed;
    } else {
      infos = provider.infos;
    }
    return Swiper(
      loop: false,
      scrollDirection: Axis.vertical,
      itemCount: infos.length,
      itemBuilder: (context, index) {
        MainInfo curData = infos[index];
        return Container(
          decoration: BoxDecoration(color: Colors.black),
          child: Stack(children: [
            CenterImage(
              videoPath: curData.videoPath,
            ),
            Home(),
          ]),
        );
      },
    );
  }

  @override
  bool get wantKeepAlive => true;
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;
    RecommendProvider provider = Provider.of<RecommendProvider>(context);

    double rpx = screenWidth / 750;
    return Stack(children: [
      Positioned(
        bottom: 0,
        width: 0.70 * screenWidth,
        height: 260 * rpx,
        child: Container(
          // decoration: BoxDecoration(color: Colors.redAccent),
          child: BtnContent(),
        ),
      ),
      Positioned(
        right: 0,
        width: 0.2 * screenWidth,
        height: 500 * rpx,
        top: 0.45 * screenHeight,
        child: Container(
          // decoration: BoxDecoration(color: Colors.orangeAccent),
          child: ButtonList(),
        ),
      ),
      Positioned(
        bottom: 20 * rpx,
        right: 0,
        width: 0.2 * screenWidth,
        height: 0.2 * screenWidth,
        child: Container(
          // decoration: BoxDecoration(color: Colors.purpleAccent),
          child: RotateAlbum(),
        ),
      )
    ]);
  }
}