import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
import 'package:fcs/charts/po_line_detail.dart';
import 'package:fcs/model/chart_model.dart';
import 'package:fcs/fcs/common/theme.dart';
import 'package:fcs/vo/po_do_count.dart';
import 'package:fcs/widget/local_text.dart';

class POLineChart extends StatefulWidget {
  @override
  _POLineChartState createState() => _POLineChartState();
}

class _POLineChartState extends State<POLineChart> {
  static final numberFormatter = new NumberFormat("#,###");

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var chartModel = Provider.of<ChartModel>(context);

    List<charts.Series<CountData, DateTime>> series = [
      charts.Series(
        id: "pending",
        data: chartModel.podoCount.getPODataCounts('pending'),
        domainFn: (CountData series, _) => series.date,
        measureFn: (CountData series, _) =>
            series.count == null ? 0 : series.count,
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        dashPatternFn: (_, __) => [8, 3, 2, 3],
        labelAccessorFn: (CountData series, _) =>
            '${numberFormatter.format(series.count)}',
      ),
      charts.Series(
        id: "approved",
        data: chartModel.podoCount.getPODataCounts("approved"),
        domainFn: (CountData series, _) => series.date,
        measureFn: (CountData series, _) =>
            series.count == null ? 0 : series.count,
        colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
        labelAccessorFn: (CountData series, _) =>
            '${numberFormatter.format(series.count)}',
      ),
      charts.Series(
        id: "canceled",
        data: chartModel.podoCount.getPODataCounts("canceled"),
        domainFn: (CountData series, _) => series.date,
        measureFn: (CountData series, _) =>
            series.count == null ? 0 : series.count,
        colorFn: (_, __) => charts.MaterialPalette.gray.shadeDefault,
        dashPatternFn: (_, __) => [8, 3, 2, 3],
        labelAccessorFn: (CountData series, _) =>
            '${numberFormatter.format(series.count)}',
      ),
      charts.Series(
        id: "rejected",
        data: chartModel.podoCount.getPODataCounts("rejected"),
        domainFn: (CountData series, _) => series.date,
        measureFn: (CountData series, _) =>
            series.count == null ? 0 : series.count,
        colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
        dashPatternFn: (_, __) => [8, 3, 2, 3],
        labelAccessorFn: (CountData series, _) =>
            '${numberFormatter.format(series.count)}',
      ),
      charts.Series(
        id: "expired",
        data: chartModel.podoCount.getPODataCounts("expired"),
        domainFn: (CountData series, _) => series.date,
        measureFn: (CountData series, _) =>
            series.count == null ? 0 : series.count,
        colorFn: (_, __) => charts.MaterialPalette.purple.shadeDefault,
        dashPatternFn: (_, __) => [8, 5, 2, 5],
        labelAccessorFn: (CountData series, _) =>
            '${numberFormatter.format(series.count)}',
      ),
      charts.Series(
        id: "closed",
        data: chartModel.podoCount.getPODataCounts("closed"),
        domainFn: (CountData series, _) => series.date,
        measureFn: (CountData series, _) =>
            series.count == null ? 0 : series.count,
        colorFn: (_, __) => charts.MaterialPalette.indigo.shadeDefault,
        dashPatternFn: (_, __) => [8, 5, 2, 5],
        labelAccessorFn: (CountData series, _) =>
            '${numberFormatter.format(series.count)}',
      ),
    ];

    return Container(
      height: 200,
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                children: <Widget>[
                  LocalText(context, "po", color: primaryColor, fontSize: 16),
                  LocalText(context, 'chart.30_days',
                      color: primaryColor, fontSize: 14)
                ],
              ),
              InkWell(
                child: LocalText(
                  context,
                  "po.details",
                  color: secondaryColor,
                  fontSize: 14,
                ),
                onTap: () {
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (_) => POLineDetail()));
                },
              ),
            ],
          ),
          Expanded(
            child: charts.TimeSeriesChart(
              series,
              animate: true,
              defaultRenderer: new charts.LineRendererConfig(
                includePoints: true,
              ),
              behaviors: [
                new charts.SeriesLegend(
                  position: charts.BehaviorPosition.end,
                  outsideJustification:
                      charts.OutsideJustification.middleDrawArea,
                  entryTextStyle: charts.TextStyleSpec(
                      color: charts.Color(r: 127, g: 63, b: 191),
                      fontFamily: 'Georgia',
                      fontSize: 11),
                )
              ],
              primaryMeasureAxis: new charts.NumericAxisSpec(
                  tickProviderSpec: new charts.BasicNumericTickProviderSpec(
                      zeroBound: false, desiredTickCount: 10),
                  renderSpec: new charts.GridlineRendererSpec(
                      lineStyle: charts.LineStyleSpec(
                    dashPattern: [4, 4],
                  ))),
            ),
          ),
        ],
      ),
    );
  }
}