import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/view_widget/icon_text.dart';

class StoreSelectorPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _StoreSelectorPage();
  }
}

class _StoreSelectorPage extends State<StoreSelectorPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          S.of(context).mendianxuanzhe,
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
            fontSize: 18,
          ),
        ),
        centerTitle: false,
        backgroundColor: Color(0xFFFAFAFA),
        elevation: 0,
        leading: GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Container(
            alignment: Alignment.centerRight,
            margin: EdgeInsets.only(left: 10),
            padding: EdgeInsets.all(6),
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.black,
              size: 24,
            ),
          ),
        ),
        titleSpacing: 2,
        leadingWidth: 56,
      ),
      body: Container(
        margin: EdgeInsets.only(top: 18),
        child: Column(
          children: [
            Expanded(child: ListView.builder(
                itemCount: 4,
                physics: BouncingScrollPhysics(),
                itemBuilder: (context, position) {
                  return GestureDetector(
                    onTap: () {
                      setState(() {
                        groupValue = "$position";
                      });
                    },
                    child: buildStoreItem(position),
                  );
                }),),
            Container(
              padding: EdgeInsets.only(top: 16, bottom: 16),
              decoration: BoxDecoration(
                  color: Color(0xFF32A060),
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(4), topRight: Radius.circular(4))),
              alignment: Alignment.center,
              child: Text(
                S.of(context).queren,
                style: TextStyle(
                    fontSize: 16,
                    color: Color(0xFFFFFFFF),
                    fontWeight: FontWeight.bold),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildStoreItem(position) {
    return Container(
      margin: EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
                color: Colors.black.withAlpha(12),
                offset: Offset(0, 3),
                blurRadius: 14,
                spreadRadius: 0)
          ],
          borderRadius: BorderRadius.all(Radius.circular(8))),
      child: Row(
        children: [
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "海峡姐妹茶(汉街店)",
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF353535),
                  ),
                ),
                SizedBox(height: 12,),
                IconText(
                  "武昌区凯德1818蓝调步行街(蔡明纬店旁)",
                  textStyle: TextStyle(
                    color: Color(0xFF353535),
                    fontSize: 14
                  ),
                  leftIcon: Icons.location_on,
                  iconColor: Color(0xFF32A060),
                  iconSize: 16,
                ),
                SizedBox(height: 4,),
                IconText(
                  "10:00-22:00",
                  textStyle: TextStyle(
                      color: Color(0xFF353535),
                      fontSize: 14
                  ),
                  leftIcon: Icons.access_time,
                  iconColor: Color(0xFF32A060),
                  iconSize: 16,
                ),
              ],
            ),
          ),
          Radio(
              value: "$position",
              groupValue: groupValue,
              activeColor: Colors.green,
              onChanged: (value) {
                setState(() {
                  groupValue = value;
                });
              })
        ],
      ),
    );
  }

  String groupValue = "1";
}