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/model/chart_model.dart';
import 'package:fcs/model/main_model.dart';
import 'package:fcs/fcs/common/helpers/theme.dart';
import 'package:fcs/vo/revenue.dart';
import 'package:fcs/widget/local_text.dart';

import 'revenue_line_data.dart';

class RevenueLineChart extends StatefulWidget {
  @override
  _RevenueLineChartState createState() => _RevenueLineChartState();
}

class _RevenueLineChartState extends State<RevenueLineChart> {
  static final numberFormatter = NumberFormat.compact();
  int actualChart = 0;

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

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

    List<charts.Series<Data, DateTime>> series = [
      charts.Series(
        id: "Subscribers",
        data: chartModel.revenue.getData(),
        domainFn: (Data series, _) => series.date,
        measureFn: (Data series, _) => series.amount,
        colorFn: (_, __) => charts.ColorUtil.fromDartColor(primaryColor),
        labelAccessorFn: (Data series, _) =>
            '${numberFormatter.format(series.amount)}',
      ),
    ];

    final moneyFormatter =
        new charts.BasicNumericTickFormatterSpec.fromNumberFormat(
            new NumberFormat.compact());

    return Container(
      height: 200,
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  mainModel.user.isOwnerAndAbove()
                      ? Row(
                          children: <Widget>[
                            LocalText(context, 'chart.revenue',
                                fontSize: 16, color: primaryColor),
                            LocalText(context, 'chart.30_days',
                                color: primaryColor, fontSize: 14),
                          ],
                        )
                      : Row(
                          children: <Widget>[
                            LocalText(context, 'chart.spending',
                                fontSize: 16, color: primaryColor),
                            LocalText(context, 'chart.30_days',
                                color: primaryColor, fontSize: 14)
                          ],
                        ),
                  Text(
                      "${chartModel.revenue.mapData == null ? "" : numberFormatter.format(chartModel.revenue.getTotal(actualChart))}",
                      style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.w700,
                          fontSize: 17.0))
                ],
              ),
              InkWell(
                child: LocalText(
                  context,
                  "revenue.detail",
                  color: secondaryColor,
                  fontSize: 14,
                ),
                onTap: () {
                  Navigator.of(context).push(
                      MaterialPageRoute(builder: (_) => RevenueLineData()));
                },
              ),
            ],
          ),
          Expanded(
            child: charts.TimeSeriesChart(
              series,
              animate: true,
              defaultRenderer: new charts.LineRendererConfig(
                includePoints: true,
              ),
              primaryMeasureAxis: new charts.NumericAxisSpec(
                  tickFormatterSpec: moneyFormatter,
                  tickProviderSpec: new charts.BasicNumericTickProviderSpec(
                      zeroBound: false, desiredTickCount: 10),
                  renderSpec: new charts.GridlineRendererSpec(
                      lineStyle: charts.LineStyleSpec(
                    dashPattern: [4, 4],
                  ))),
            ),
          ),
        ],
      ),
    );
  }
}