import 'package:fcs/constants.dart';
import 'package:fcs/domain/vo/shipment_status.dart';
import 'package:fcs/helpers/theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_vector_icons/flutter_vector_icons.dart';
import 'package:intl/intl.dart';
import 'package:timeline_list/timeline_list.dart';

var dateFormatter = DateFormat('dd MMM yyyy');

class StatusTree extends StatelessWidget {
  final List<ShipmentStatus>? shipmentHistory;
  final String? currentStatus;

  const StatusTree({super.key, this.shipmentHistory, this.currentStatus});
  @override
  Widget build(BuildContext context) {
    bool isPacked = currentStatus != package_received_status &&
        currentStatus != package_processed_status;
    var receivedIcon = Container(
        width: 25,
        height: 25,
        decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.green),
        child: Icon(MaterialCommunityIcons.inbox_arrow_down,
            color: Colors.white, size: 18));
    var processedIcon = Container(
        width: 25,
        height: 25,
        decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.green),
        child: Icon(FontAwesome.dropbox, color: Colors.white, size: 18));
    var packedIcon = Container(
        width: 25,
        height: 25,
        decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.green),
        child: Icon(MaterialCommunityIcons.package,
            color: Colors.white, size: 18));
    var shippedIcon = Container(
        width: 25,
        height: 25,
        decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.green),
        child: Icon(Ionicons.ios_airplane, color: Colors.white, size: 18));
    var deliveredIcon = Container(
        width: 25,
        height: 25,
        decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.green),
        child: Icon(MaterialCommunityIcons.truck_fast,
            color: Colors.white, size: 18));

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          'Status',
          style: TextStyle(color: primaryColor, fontSize: 17),
        ),
        Container(
          child: Timeline.builder(
            shrinkWrap: true,
            context: context,
            markerCount: shipmentHistory?.length ?? 0,
            physics: NeverScrollableScrollPhysics(),
            properties: TimelineProperties(
                iconAlignment: MarkerIconAlignment.center,
                iconSize: 25,
                timelinePosition: TimelinePosition.start),
            markerBuilder: (context, index) {
              ShipmentStatus? e = shipmentHistory?[index];
              return Marker(
                child: SizedBox(
                  width: 250,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: e == null
                        ? []
                        : <Widget>[
                            Text(e.status,
                                style: TextStyle(
                                    color: e.done! ? primaryColor : Colors.grey,
                                    fontSize: 15,
                                    fontWeight: FontWeight.bold)),
                            e.done! || isPacked
                                ? e.date != null
                                    ? Text(
                                        dateFormatter.format(e.date!),
                                        style: TextStyle(fontSize: 13),
                                      )
                                    : const SizedBox()
                                : Container(),
                            e.staffName == null
                                ? Container()
                                : Text(e.staffName!,
                                    style: TextStyle(fontSize: 13))
                          ],
                  ),
                ),
                icon: e == null
                    ? null
                    : e.status == package_shipped_status
                        ? shippedIcon
                        : e.status == package_delivered_status
                            ? deliveredIcon
                            : e.status == package_packed_status
                                ? packedIcon
                                : e.status == package_processed_status
                                    ? processedIcon
                                    : receivedIcon,
                position: MarkerPosition.left,
              );
            },
          ),
        )
      ],
    );
  }
}