import 'package:design/design.dart';
import 'package:example/pages/tabbar/tabbar_controller.dart';
import 'package:guru_widgets/tabbar/guru_tab_bar.dart';
import 'package:guru_widgets/guru_widgets.dart';
import 'package:guru_widgets/sliderbar/guru_slider_bar.dart';

class TabbarPage extends GetWidget<TabbarController> {

  final _divider = const HorizontalDivider(
    height: 20,
    indent: 16,
    endIndent: 16,
    thickness: 0.5,
    color: Colors.transparent,
  );


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF121212),
      appBar: AppBar(
        title: const Text('Guru Tabbar'),
        backgroundColor: Colors.transparent,
        elevation: 0,
        centerTitle: true,
      ),
      body: Column(children: [
        GuruTabBar(items: [
          GuruTabBarItem(title: 'tiletille', icon: 'assets/images/ic_zhendong.png'),
          GuruTabBarItem(title: 'tile  daasdasd ', icon: 'assets/images/ic_zhendong.png'),
        ],
        // tabViews: const [
        //   Text('title', style: TextStyle(color: Colors.white),),
        //   Text('title'),
        //   Text('title'),
        // ]
        ),
        _divider,
        GuruTabBar(items: [
          GuruTabBarItem(title: 'tiletile tileti ddddddddddddddletile', icon: 'assets/images/ic_zhendong.png'),
          GuruTabBarItem(title: 'tile  dasdasdasd ', icon: 'assets/images/ic_zhendong.png'),
        ],
        // tabViews: const [
        //   Text('title', style: TextStyle(color: Colors.white),),
        //   Text('title'),
        //   Text('title'),
        // ]
        ),
        _divider,
        GuruTabBar(items: [
          GuruTabBarItem(title: 'tiletile tileti ddddddddddddddletile', icon: 'assets/images/ic_zhendong.png'),
          GuruTabBarItem(title: 'tile  dasdasdasd ', icon: 'assets/images/ic_zhendong.png'),
          GuruTabBarItem(title: 'tile', icon: 'assets/images/ic_zhendong.png')
        ],
        // tabViews: const [
        //   Text('title', style: TextStyle(color: Colors.white),),
        //   Text('title'),
        //   Text('title'),
        // ]
        ),
        _divider,
        GuruTabBar(items: [
          GuruTabBarItem(title: 'tile', icon: 'assets/images/ic_zhendong.png'),
          GuruTabBarItem(title: 'tile', icon: 'assets/images/ic_zhendong.png'),
          GuruTabBarItem(title: 'tile', icon: 'assets/images/ic_zhendong.png'),
          GuruTabBarItem(title: 'tile', icon: 'assets/images/ic_zhendong.png')
        ],
        // tabViews: const [
        //   Text('title', style: TextStyle(color: Colors.white),),
        //   Text('title'),
        //   Text('title'),
        // ]
        ),
        GuruSliderBar(
          controller: controller.sliderbarController,
          items: const [
            GuruSliderBarItem(data: 2, multipleImage: 'assets/images/slider_bar/x2.png', background: BoxDecoration(color: Color(0xFFDD192A))),
            GuruSliderBarItem(data: 3, multipleImage: 'assets/images/slider_bar/x3.png', background: BoxDecoration(color: Color(0xFFF98B1B))),
            GuruSliderBarItem(data: 4, multipleImage: 'assets/images/slider_bar/x4.png', background: BoxDecoration(color: Color(0xFFFFCC00))),
            GuruSliderBarItem(data: 3, multipleImage: 'assets/images/slider_bar/x5.png', background: BoxDecoration(color: Color(0xFF73AC35))),
            GuruSliderBarItem(data: 2, multipleImage: 'assets/images/slider_bar/x4.png', background: BoxDecoration(color: Color(0xFFFFCC00))),
            GuruSliderBarItem(data: 3, multipleImage: 'assets/images/slider_bar/x3.png', background: BoxDecoration(color: Color(0xFFF98B1B))),
            GuruSliderBarItem(data: 3, multipleImage: 'assets/images/slider_bar/x2.png', background: BoxDecoration(color: Color(0xFFDD192A))),
          ],
          
        ),
        GuruButton(size: Size(200, 20), action: 'stop', onPressed: () {
          controller.sliderbarController.stop();
        }),
        GuruButton(size: Size(200, 20), action: 'play', onPressed: () {
          controller.sliderbarController.start();
        }),
      ],)
    );
  }
}