import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../../tools/YSColors.dart';
import '../../tools/YSTools.dart';

class YSShopListItemView extends StatefulWidget {
  final Map item;
  const YSShopListItemView({Key? key, required this.item}) : super(key: key);

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

class YSShopListItemViewState extends State<YSShopListItemView> {
  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context,YSPriceTypeNotifier value,child) {
        Color upColor = Colors.green;
        Color downColor = Colors.red;
        if(YSUserRecord().priceType=='1'){
          upColor = Colors.green;
          downColor = Colors.red;
        }else{
          upColor = Colors.red;
          downColor = Colors.green;
        }
        return Container(
            padding: EdgeInsets.only(left: hsp(15),right: hsp(15),top: hsp(10),bottom: hsp(10)),
            alignment: Alignment.centerLeft,
            child: Row(
              children: [
                ClipRRect(
                  borderRadius: const BorderRadius.all(Radius.circular(50)),
                  child: YSImage.network(widget.item['icon'],height: hsp(40),width: hsp(40),),
                ),
                Expanded(
                    child: Container(
                      padding: EdgeInsets.only(top: hsp(5),bottom: hsp(5),left: hsp(5),right: hsp(5)),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(widget.item['symbol'],style: YSColors.contentStyle(context),),
                          Padding(
                              padding: EdgeInsets.only(top: hsp(5)),
                              child: RichText(text: TextSpan(
                                  style: YSColors.subStyle(context),
                                  children: [
                                    TextSpan(
                                      text: 'Vol \$ ${toFlex('${widget.item['volume']}')} '.fixAutoLines(),
                                    ),
                                    // TextSpan(
                                    //     text: '-29535.65',
                                    //     style: TextStyle(color: Color(0xFFFF0000))
                                    // )
                                  ]
                              ))
                          )
                        ],
                      ),
                    )
                ),
                Expanded(child: Container(
                  padding: EdgeInsets.only(top: hsp(5),bottom: hsp(5),left: hsp(5),right: hsp(10)),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text('${toFlex('${widget.item['price_usd']}',range: 3)}',style: YSColors.contentStyle(context),),
                      Padding(
                        padding: EdgeInsets.only(top: hsp(5)),
                        child: Text('\$ ${toFlex('${widget.item['price_usd']}')} ',style: YSColors.subStyle(context),)
                      )
                    ],
                  ),
                )),
                Container(
                  width: hsp(60),
                  height: hsp(30),
                  decoration: BoxDecoration(
                    color: double.parse('${widget.item['chg']}')>0?upColor:downColor,
                    borderRadius: const BorderRadius.all(Radius.circular(5))
                  ),
                  alignment: Alignment.center,
                  child: Text('${toPercentage(widget.item['chg'])}',style: YSColors.sub2Style( context),),
                )
              ],
            )
        );
      }
    );
  }
}