import 'package:diplomaticquarterapp/core/model/weahter/weather_model.dart';
import 'package:diplomaticquarterapp/widgets/text/app_texts_widget.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class WeatherSlider extends StatelessWidget {
  // final width;
  // final LinearGradient color;
  final GetCityInfoList data;
  WeatherSlider(this.data);
  LinearGradient red = LinearGradient(
      colors: [
        Colors.redAccent[100],
        Colors.redAccent
      ]);
  LinearGradient green = LinearGradient(
      colors: [
        Colors.greenAccent[100],
        Colors.greenAccent
      ]);
  LinearGradient grey = LinearGradient(
      colors: [
        Colors.grey[100],
        Colors.grey
      ]);
  LinearGradient orange = LinearGradient(
      colors: [
        Colors.orangeAccent[100],
        Colors.orange
      ]);
  LinearGradient yellow = LinearGradient(
      colors: [
        Colors.yellow[100],
        Colors.yellow[600]
      ]);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
            padding: EdgeInsets.only(top:10),
            child: AppText(data.name)),
        AppText(
          data.category,
          fontSize: 24,
        ),
        Padding(
          padding: EdgeInsets.all(10),
          child: Stack(
            children: [
              Container(
                margin: EdgeInsets.only(bottom:10),
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        colors: [Colors.grey[100], Colors.grey[400]]),
                    borderRadius: BorderRadius.circular(10)),
                height: 15,
                width: MediaQuery.of(context).size.width,
                child: SizedBox(),
              ),
              Positioned(
                  top: 0,
                  child: Container(
                    decoration: BoxDecoration(
                        gradient: data.colorName =='red' ? red : data.colorName =='orange' ? orange : data.colorName =='green' ?  green : data.colorName == 'yellow' ? yellow : grey,
                        borderRadius: BorderRadius.circular(10)),
                    height: 15,
                    width: (MediaQuery.of(context).size.width * (double.parse(data.value) / 10)),
                    padding: EdgeInsets.all(15),
                    child: SizedBox(),
                  )),
              Positioned(child: Container(
                  height: 0,
                  width:0,
                  decoration: ShapeDecoration(
                    color:data.colorName =='red' ? Colors.redAccent : data.colorName =='orange' ? Colors.orangeAccent : data.colorName =='green' ?  Colors.greenAccent : data.colorName == 'yellow' ? Colors.yellowAccent : Colors.grey,
                    shape: MessageBorder(),

                  )),top:25, left: (MediaQuery.of(context).size.width * (double.parse(data.value) / 10)),)

            ],
          ),

        ),
        Padding(
            padding: EdgeInsets.only(top:10),
            child:  data.isValuesReversed == false ? Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                AppText(
                    data.categoriesNames.category1,
                    fontSize: 12,
                    color: data.categoriesNames.category1== data.category && data.colorName=='red' ? Colors.redAccent :  data.categoriesNames.category1== data.category && data.colorName=='orange' ? Colors.orangeAccent : data.categoriesNames.category1== data.category && data.colorName=='green' ? Colors.greenAccent : data.categoriesNames.category1== data.category && data.colorName=='yellow' ?  Colors.yellow[900]   : Colors.black
                ),
                AppText(
                    data.categoriesNames.category2,
                    fontSize: 12,
                    color: data.categoriesNames.category2== data.category && data.colorName=='red' ? Colors.redAccent :  data.categoriesNames.category2== data.category && data.colorName=='orange' ? Colors.orangeAccent : data.categoriesNames.category2== data.category && data.colorName=='green' ? Colors.greenAccent :  data.categoriesNames.category2== data.category && data.colorName=='yellow' ?  Colors.yellow[900] : Colors.black

                ),
                AppText(
                    data.categoriesNames.category3,
                    fontSize: 12,
                    color: data.categoriesNames.category3== data.category && data.colorName=='red' ? Colors.redAccent :  data.categoriesNames.category3== data.category && data.colorName=='orange' ? Colors.orangeAccent : data.categoriesNames.category3== data.category && data.colorName=='green' ? Colors.greenAccent :  data.categoriesNames.category3== data.category && data.colorName=='yellow' ?  Colors.yellow[900]  : Colors.black

                ),
                AppText(
                    data.categoriesNames.category4,
                    fontSize: 12,
                    color: data.categoriesNames.category4== data.category && data.colorName=='red' ? Colors.redAccent :  data.categoriesNames.category4== data.category && data.colorName=='orange' ? Colors.orangeAccent : data.categoriesNames.category4== data.category && data.colorName=='green' ? Colors.greenAccent : data.categoriesNames.category4== data.category && data.colorName=='yellow' ? Colors.yellow[900]  : Colors.black

                ),
                AppText(
                    data.categoriesNames.category5,
                    fontSize: 12,
                    color: data.categoriesNames.category5== data.category && data.colorName=='red' ? Colors.redAccent :  data.categoriesNames.category5== data.category && data.colorName=='orange' ? Colors.orangeAccent : data.categoriesNames.category5== data.category && data.colorName=='green' ? Colors.greenAccent :  data.categoriesNames.category5== data.category && data.colorName=='yellow' ? Colors.yellow[900] : Colors.black

                ),
              ],
            ) : Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                AppText(
                    data.categoriesNames.category5,
                    fontSize: 12,
                    color: data.categoriesNames.category5== data.category && data.colorName=='red' ? Colors.redAccent :  data.categoriesNames.category5== data.category && data.colorName=='orange' ? Colors.orangeAccent : data.categoriesNames.category5== data.category && data.colorName=='green' ? Colors.greenAccent : data.categoriesNames.category5== data.category && data.colorName=='yellow' ?  Colors.yellow[900]   : Colors.black
                ),
                AppText(
                    data.categoriesNames.category4,
                    fontSize: 12,
                    color: data.categoriesNames.category4== data.category && data.colorName=='red' ? Colors.redAccent :  data.categoriesNames.category4== data.category && data.colorName=='orange' ? Colors.orangeAccent : data.categoriesNames.category4== data.category && data.colorName=='green' ? Colors.greenAccent :  data.categoriesNames.category4== data.category && data.colorName=='yellow' ?  Colors.yellow[900] : Colors.black

                ),
                AppText(
                    data.categoriesNames.category3,
                    fontSize: 12,
                    color: data.categoriesNames.category3== data.category && data.colorName=='red' ? Colors.redAccent :  data.categoriesNames.category3== data.category && data.colorName=='orange' ? Colors.orangeAccent : data.categoriesNames.category3== data.category && data.colorName=='green' ? Colors.greenAccent :  data.categoriesNames.category3== data.category && data.colorName=='yellow' ?  Colors.yellow[900]  : Colors.black

                ),
                AppText(
                    data.categoriesNames.category2,
                    fontSize: 12,
                    color: data.categoriesNames.category2== data.category && data.colorName=='red' ? Colors.redAccent :  data.categoriesNames.category2== data.category && data.colorName=='orange' ? Colors.orangeAccent : data.categoriesNames.category2== data.category && data.colorName=='green' ? Colors.greenAccent : data.categoriesNames.category2== data.category && data.colorName=='yellow' ? Colors.yellow[900]  : Colors.black

                ),
                AppText(
                    data.categoriesNames.category1,
                    fontSize: 12,
                    color: data.categoriesNames.category1== data.category && data.colorName=='red' ? Colors.redAccent :  data.categoriesNames.category1== data.category && data.colorName=='orange' ? Colors.orangeAccent : data.categoriesNames.category1== data.category && data.colorName=='green' ? Colors.greenAccent :  data.categoriesNames.category1== data.category && data.colorName=='yellow' ? Colors.yellow[900] : Colors.black

                ),
              ],
            )),
        Padding(
            padding: EdgeInsets.all(15),
            child:Divider())
      ],
    );

  }
}
class MessageBorder extends ShapeBorder {
  final bool usePadding;
  final bool reverse;
  MessageBorder({this.usePadding = true, this.reverse =false});

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.only(bottom: usePadding? 0 : 0);

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) => null;

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    rect = Rect.fromPoints(rect.bottomRight, rect.bottomLeft - Offset(0, 0));
    if(!reverse) {
      return Path()
        ..addRRect(
            RRect.fromRectAndRadius(rect, Radius.circular(rect.height / 2)))
        ..moveTo(rect.topCenter.dx - 10, rect.topCenter.dy)
        ..relativeLineTo(10, -10)..relativeLineTo(10, 10)
        ..close();
    }else{
      return Path()
        ..addRRect(
            RRect.fromRectAndRadius(rect, Radius.circular(rect.height / 2)))
        ..moveTo(rect.topCenter.dx, rect.topCenter.dy)
        ..relativeLineTo(10, 20)
        ..relativeLineTo(20, -20)
        ..close();
    }
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}

  @override
  ShapeBorder scale(double t) => this;
}