import 'package:flutter/material.dart';
import 'package:food_hub_app/apis/recipe.dart';
import 'package:food_hub_app/config/app_config.dart';
import 'package:food_hub_app/models/recipe.dart';
import 'package:food_hub_app/widgets/common/image.dart';
import 'package:food_hub_app/widgets/common/index.dart';
import 'package:food_hub_app/widgets/common/year_selector.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:timelines_plus/timelines_plus.dart';

class RecipeTimeline extends StatefulWidget {
  const RecipeTimeline({super.key});

  @override
  State<StatefulWidget> createState() => _RecipeTimeline();
}

class _RecipeTimeline extends State<RecipeTimeline> {
  List<Record> recordList = [];

  @override
  void initState() {
    super.initState();
    refreshRecord(DateTime.now().year);
  }

  Future<void> refreshRecord(int year) async {
    final result = await queryRecordApi("$year-01-01", "$year-12-31");
    setState(() {
      recordList = result;
    });
  }

  Widget buildTimelineCard(BuildContext context, Record record) {
    final imageUrls = ['${AppConfig.baseApiUrl}/${record.imageUrl}'];

    void imageTapClick() {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder:
              (context) => ImagePreviewPage(images: imageUrls, initialIndex: 0),
        ),
      );
    }

    return buildCard(
      context: context,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            record.date,
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          Column(
            children: [
              Text(record.name, style: TextStyle(fontSize: 16)),
              const SizedBox(height: 5),
              GestureDetector(
                onTap: () => imageTapClick(),
                child: AspectRatio(
                  aspectRatio: 1.5,
                  child: buildNetworkImage(imageUrls.first),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget buildTimeline(BuildContext context, List<Record> recordList) {
    if (recordList.isEmpty) {
      return buildEmptyData();
    } else {
      return Timeline.tileBuilder(
        theme: TimelineThemeData(nodePosition: 0, indicatorPosition: 0),
        builder: TimelineTileBuilder.connected(
          itemCount: recordList.length,
          connectorBuilder:
              (context, index, type) => Connector.solidLine(
                thickness: 2,
                color: Theme.of(context).colorScheme.primary,
              ),
          indicatorBuilder: (context, index) {
            return Indicator.dot(
              size: 12.0,
              color: Theme.of(context).colorScheme.primary,
            );
          },
          contentsBuilder: (context, index) {
            return buildTimelineCard(context, recordList[index]);
          },
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        YearSelector(
          initialYear: DateTime.now().year,
          minYear: 2000,
          maxYear: 2100,
          onYearChanged: (year) => refreshRecord(year),
        ),
        Expanded(child: buildTimeline(context, recordList)),
      ],
    );
  }
}