import 'package:flutter/material.dart';

import 'package:twong/utils/index.dart';

class SliverBar extends StatefulWidget {
  final List<Widget> menus;
  final Function(int, {bool up}) onChange;
  SliverBar({ Key key, this.menus, this.onChange } ): super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _SliverBarState();
  }
}

class _SliverBarState extends State<SliverBar> {
  TextStyle _style = TextStyle(fontSize: 14, color: Colors.grey,);
  TextStyle _selectStyle = TextStyle(fontSize: 14, color: Colors.black,);

  int _curIdx = 0;
  bool _isSort = true;

  changeType (int type) {
    if(_curIdx == type) {
      if(type == 0) return;
      setState(() {
        _isSort = !_isSort;
      });
    } else {
      _isSort = true;
    }
    setState(() {
      _curIdx = type;
    });
    if(widget.onChange != null) {
      widget.onChange(_curIdx, up: _isSort);
    }
  }

  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      pinned: true,
      centerTitle: true,
      backgroundColor: Colors.white,
      shape: Border(
          bottom: BorderSide(color: Colors.grey, width: 0.3.px)
      ),
      shadowColor: Colors.black,
      automaticallyImplyLeading: false,
      title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(child: GestureDetector(
                onTap: () => changeType(0),
                child: Text("默认", textAlign: TextAlign.center,
                  style: _curIdx == 0 ? _selectStyle : _style,)),
            ),
            Expanded(child: GestureDetector(
                onTap: () => changeType(1),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("销量", textAlign: TextAlign.center,
                        style: _curIdx == 1 ? _selectStyle : _style,),
                      _curIdx == 1
                          ? Icon(_isSort ? Icons.expand_more : Icons.expand_less,
                            color: Colors.black)
                          : Icon(Icons.unfold_more, color: Colors.grey)
                    ])
            )),
            Expanded(child: GestureDetector(
              onTap: () => changeType(2),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text("价格", textAlign: TextAlign.center,
                      style: _curIdx == 2 ? _selectStyle : _style,),
                    _curIdx == 2
                        ? Icon(_isSort ? Icons.expand_less : Icons.expand_more,
                          color: Colors.black)
                        : Icon(Icons.unfold_more, color: Colors.grey)
                  ]),
            )),
          ]),
      bottom: PreferredSize(
        child: Container(),
        preferredSize: Size.fromHeight(- 8.px),
      ),
    );
  }
}