import 'dart:convert';
import 'dart:io' as io show Directory, File;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_quill/quill_delta.dart';
import 'package:flutter_quill_extensions/flutter_quill_extensions.dart';
import 'package:path/path.dart' as path;
import 'package:responsive_builder/responsive_builder.dart';

import '../../routes/custom_appBar.dart';
import '../../routes/custom_drawer.dart';
import '../../services/apiService.dart';

/// Custom Embed Definition
class TimeStampEmbed {
  static const String type = 'timeStamp';
}

class Template extends StatefulWidget {
  @override
  TemplateState createState() => TemplateState();
}

class TemplateState extends State<Template> {
  final ApiService apiService = ApiService();
  final QuillController _controller = QuillController.basic();
  final FocusNode _editorFocusNode = FocusNode();
  final ScrollController _editorScrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _controller.document = Document();
  }

  void _insertTimeStamp() {
    final timestamp = DateTime.now().toIso8601String();
    // Insert embed at the current selection
    final delta = Delta()..insert({TimeStampEmbed.type: {'value': timestamp}});
    _controller.compose(delta, _controller.selection, ChangeSource.local);
  }

  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(builder: (context, sizingInfo) {
      bool isDesktop = sizingInfo.deviceScreenType == DeviceScreenType.desktop;

      return Scaffold(
        backgroundColor: const Color(0xFFf5f5f5),
        appBar: CustomAppBar(isDesktop: isDesktop),
        drawer: CustomDrawer(isDesktop: false),
        body: Padding(
          padding: isDesktop
              ? EdgeInsets.symmetric(
            horizontal: MediaQuery.of(context).size.width * 0.1,
          )
              : EdgeInsets.all(0),
          child: SafeArea(
            child: Column(
              children: [
                QuillSimpleToolbar(
                  controller: _controller,
                  config: QuillSimpleToolbarConfig(
                    embedButtons: FlutterQuillEmbeds.toolbarButtons(),
                    showClipboardPaste: true,
                    customButtons: [
                      QuillToolbarCustomButtonOptions(
                        icon: const Icon(Icons.access_time),
                        onPressed: _insertTimeStamp,
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: QuillEditor(
                    focusNode: _editorFocusNode,
                    scrollController: _editorScrollController,
                    controller: _controller,
                    config: QuillEditorConfig(
                      placeholder: 'Start writing your notes...',
                      padding: const EdgeInsets.all(16),
                      embedBuilders: [
                        ...FlutterQuillEmbeds.editorBuilders(),
                        TimeStampEmbedBuilder(),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    });
  }
}

/// Embed Builder for TimeStamp
class TimeStampEmbedBuilder extends EmbedBuilder {
  @override
  String get key => TimeStampEmbed.type;

  @override
  Widget build(BuildContext context, EmbedContext embedContext) {
    final data = embedContext.node.value.data as Map<String, dynamic>;
    final String time = data['value'] ?? '';

    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        const Icon(Icons.access_time_rounded, size: 18),
        const SizedBox(width: 4),
        Text(
          time,
          style: const TextStyle(fontStyle: FontStyle.italic),
        ),
      ],
    );
  }

  @override
  String toPlainText(Embed node) {
    final data = node.value.data as Map<String, dynamic>;
    return '[${data['value'] ?? ''}]';
  }
}