import 'package:flutter/material.dart';
import 'package:flutter_canvas_editor/providers/editor.dart';
import 'package:flutter_canvas_editor/style/canvas_style.dart';
import 'package:flutter_canvas_editor/widgets/elements.dart';
import 'package:provider/provider.dart';

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

  @override
  State<ToolbarWidget> createState() => _ToolbarWidgetState();
}

class _ToolbarWidgetState extends State<ToolbarWidget> {
  List<DropdownMenuItem<int>> fontSizeDropdownItems= [];

  List<DropdownMenuItem<int>> qrSizeDropdownItems= [];


  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    populateFontSizeDropdownItems();
    populateQrSizeDropdownItems();
  }

  //functions
  void populateFontSizeDropdownItems() {
    CanvasStyle.fontSizeMap.forEach((key, val) {
      final item = DropdownMenuItem(
        value: key,
        child: Text(key.toString())
      );


      fontSizeDropdownItems.add(item);
    });
  }

  void populateQrSizeDropdownItems() {
    CanvasStyle.qrSizeMap.forEach((key, val) {
      final item = DropdownMenuItem(
        value: key,
        child: Text(key.toString())
      );


      qrSizeDropdownItems.add(item);
    });
  }

  @override
  Widget build(BuildContext context) {
    final editorProvider = Provider.of<Editor>(context);

    return Container(
      padding: EdgeInsets.symmetric(horizontal: 16),
      color: Colors.white,
      width: MediaQuery.of(context).size.width,
      height: 150,
      child: ListView(
        children: Provider.of<Editor>(context).insertElementMode ? insertElementSection() : elementPropertiesSection(editorProvider),
      ),
    );
  }

  List<Widget> insertElementSection() {
    return [
      Text('Insert Element'),
      SizedBox(height: 20),
      ElevatedButton(
        onPressed: Provider.of<Editor>(context, listen: false).addTextElement, 
        child: Text('Add Text Element')
      ),
      ElevatedButton(
        onPressed: Provider.of<Editor>(context, listen: false).addTextboxElement, 
        child: Text('Add Textbox Element')
      ),
      // ElevatedButton(
      //   onPressed: Provider.of<Editor>(context, listen: false).addQrCodeElement, 
      //   child: Text('Add Qr Code Element')
      // ),
    ];
  }

  List<Widget> elementPropertiesSection(Editor editorProvider) {
    final element = Provider.of<Editor>(context).selectedElm;

    return [
      Text('Properties'),
      SizedBox(height: 20),
      Text('Selected elements: ${Provider.of<Editor>(context).selectedElmType}'),

      Text('Top: ${Provider.of<Editor>(context, listen: true).selectedElm!.position.top}, Left: ${Provider.of<Editor>(context, listen: true).selectedElm!.position.left}}'),
      
      // ? Value Editor
      if([ElementType.text, ElementType.textbox].contains(editorProvider.selectedElm!.type)) TextField(
        readOnly: element!.isLocked, 
        controller: element!.valueController,
        onTap: editorProvider.enableEdit,
        onEditingComplete: () {
          FocusManager.instance.primaryFocus?.unfocus();

          editorProvider.disableEdit();

          print('kepenjet');
        },
        onChanged: (value) {
          setState(() {
            
          });
        },
      ),
      
      if (editorProvider.selectedElm!.type != ElementType.qr) ElevatedButton(
        onPressed: Provider.of<Editor>(context).rotate, 
        child: Text('Rotate')
      ),

      // ? Font Resizer (Only show when selected element is [ElementType.text, ElementType.textbox])
      if (Provider.of<Editor>(context).shouldShowFontResizer) Row(
        children: [
          DropdownButton<int>(
            value: element?.fontScale,
            items: fontSizeDropdownItems, 
            onChanged: (val) {
              print('dropdown value: $val');
              Provider.of<Editor>(context, listen: false).changeFontSize(val);
            }
          ),
          IconButton.filled(
            onPressed: Provider.of<Editor>(context, listen: false).incrementFontSize, 
            icon: Icon(Icons.add)
          ),
          IconButton.filled(
            onPressed:  Provider.of<Editor>(context, listen: false).decrementFontSize,
            icon: Icon(Icons.remove)
          ),
          IconButton.filled(
            onPressed:  () => print('kepenjet tombol test'),
            icon: Icon(Icons.remove)
          ),
        ],
      ),

      // ? Qr Resizer (Only show when selected element is ElementType.qr)
      if (Provider.of<Editor>(context).shouldShowQrResizer) Row(
        children: [
          DropdownButton<int>(
            value: element?.qrScale,
            items: qrSizeDropdownItems, 
            onChanged: (val) {
              print('dropdown value: $val');
              Provider.of<Editor>(context, listen: false).changeQrSize(val);
            }
          ),
          IconButton.filled(
            onPressed: Provider.of<Editor>(context, listen: false).incrementQrSize, 
            icon: Icon(Icons.add)
          ),
          IconButton.filled(
            onPressed:  Provider.of<Editor>(context, listen: false).decrementQrSize,
            icon: Icon(Icons.remove)
          ),
        ],
      ),

      // ? Lock Element
      ElevatedButton(
        style: ButtonStyle(
          // backgroundColor: WidgetStatePropertyAll(Theme.of(context).colorScheme.errorContainer)
        ),
        onPressed: () async {
          Provider.of<Editor>(context, listen: false).toggleLockElement();
          FocusScope.of(context).unfocus();
        },
        child: Text(
          Provider.of<Editor>(context).selectedElm!.isLocked ? 'Unlock Element' : 'Lock Element',
          // style: TextStyle(color: Theme.of(context).colorScheme.error),
        )
      ),

      // ? Delete elm button (only show when type is not ElementType.qr)
      if (Provider.of<Editor>(context).shouldShowDeleteElementButton) ElevatedButton(
        style: ButtonStyle(
          backgroundColor: WidgetStatePropertyAll(Theme.of(context).colorScheme.errorContainer)
        ),
        onPressed: () async => Provider.of<Editor>(context, listen: false).deleteElement(context), 
        child: Text(
          'Delete Element',
          style: TextStyle(color: Theme.of(context).colorScheme.error),
        )
      ),
    ];
  }
}