import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:oc_front/models/search.dart';
import 'package:oc_front/core/models/workspace_local.dart';
import 'package:oc_front/core/services/router.dart';

const List<GlobalKey<State>> _empty = [];
// ignore: must_be_immutable
class ItemRowWidget extends StatefulWidget {
  bool readOnly = false;
  double contextWidth = 0;
  AbstractItem item;
  bool low = false;
  List<GlobalKey<State>> keys = [];
  ItemRowWidget ({ super.key, this.low = false,
    required this.contextWidth, this.readOnly = false, required this.item, this.keys = _empty });
  @override ItemRowWidgetState createState() => ItemRowWidgetState();
}
class ItemRowWidgetState extends State<ItemRowWidget> {
  @override Widget build(BuildContext context) {
    double imageSize = MediaQuery.of(context).size.width != widget.contextWidth ? 0 : 80;
    var ratio = MediaQuery.of(context).size.width != widget.contextWidth ? 0.5 : 1; // 2;
    var itemWidth = (((widget.contextWidth - imageSize) / 3) - 80) / ratio;
    itemWidth = itemWidth > 100 ? 100 : ( itemWidth < 40 ? 40 : itemWidth );
    var endWidth = (itemWidth * ratio) + 80;
    Image? image;
    if (widget.item.logo != null) {
      image = Image.network(widget.item.logo ?? "", width: imageSize, height: imageSize);
    }
    Widget w = Container(
      width: widget.contextWidth,
      height: 100,
      decoration: BoxDecoration( border: Border(bottom: BorderSide(color: Colors.grey.shade300)) ),
      child: Row( children: [
          widget.low ? Container( padding: const EdgeInsets.only(left: 10),) : Container( padding: const EdgeInsets.all(10), 
            constraints: BoxConstraints(maxWidth: imageSize, minWidth: imageSize),
            child: image ?? Image.network('https://get-picto.com/wp-content/uploads/2024/01/logo-instagram-png.webp', 
              height: imageSize, width: imageSize)),
          Container(
            width: widget.low ? widget.contextWidth - 20 :  widget.contextWidth - (imageSize + 20) - endWidth,
            child: Padding(padding: widget.contextWidth != MediaQuery.of(context).size.width ? 
            const EdgeInsets.symmetric(horizontal: 10) : const EdgeInsets.symmetric(horizontal: 20),
              child: Column(crossAxisAlignment: CrossAxisAlignment.start, 
                mainAxisAlignment: MainAxisAlignment.center, children: [
                Row( children: [ 
                  widget.low ? Container() : Container(padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                    margin: const EdgeInsets.only(right: 20),
                    decoration: BoxDecoration(
                      color: isData(widget.item.topic) ? Colors.blue : 
                      isComputing(widget.item.topic) ? Colors.green : 
                      isDataCenter(widget.item.topic) ? Colors.orange : 
                      isStorage(widget.item.topic) ? Colors.red : Colors.grey,
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: Text( MediaQuery.of(context).size.width < 600 ? "" : widget.item.topic.toString(), 
                      style: const TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.w600)),
                  ),
                  Expanded( child: Text(widget.item.name?.toUpperCase() ?? "", 
                    style: TextStyle(fontSize: widget.low ? 14 : 20, overflow: TextOverflow.ellipsis, fontWeight: FontWeight.w600, color: Color(0xFFF67C0B9))),
                  )
                ]),
                Text( "From ${widget.item.owner ?? "unknown owner"}", 
                  style: const TextStyle(fontSize: 14, color: Colors.grey, overflow: TextOverflow.ellipsis)),
                Text(widget.item.shortDescription ?? "", style: const TextStyle(fontSize: 12, overflow: TextOverflow.ellipsis)),
              ],)
            )
          ),
          widget.low ? Container() : Container(
            width: endWidth,
            child: Row( 
              mainAxisAlignment: MainAxisAlignment.center,
              children : [
              InkWell( 
                mouseCursor: SystemMouseCursors.click,
                onTap: () { 
                  setState(() { 
                    if (WorkspaceLocal.hasItem(widget.item)) { WorkspaceLocal.removeItem(widget.item);
                    } else { WorkspaceLocal.addItem(widget.item); }
                  });
                  for (var key in widget.keys) { key.currentState?.setState(() {}); }
                },
                child: Container( 
                  height: 40,
                  constraints: const BoxConstraints(maxWidth: 80),
                  width: itemWidth,
                  decoration: BoxDecoration(
                    boxShadow: [BoxShadow(color: Colors.grey.shade300, spreadRadius: 1, blurRadius: 1, offset: const Offset(0, 1))],
                    color: (WorkspaceLocal.hasItem(widget.item) ? Colors.red : const Color.fromRGBO(38, 166, 154, 1)),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Icon(WorkspaceLocal.hasItem(widget.item) ? Icons.remove_shopping_cart : Icons.add_shopping_cart, 
                    color: Colors.white, size: 20 )) 
            ),
            ...(ratio > 1 ? [Padding( padding: const EdgeInsets.only(left: 20), 
              child: InkWell( 
                mouseCursor: SystemMouseCursors.click,
                onTap: () {  },
                child: Container( 
                  height: 40,
                  constraints: const BoxConstraints(maxWidth: 80, minWidth: 40),
                  width: itemWidth,
                  decoration: BoxDecoration(
                    boxShadow: [BoxShadow(color: Colors.grey.shade300, spreadRadius: 1, blurRadius: 1, offset: const Offset(0, 1))],
                    color: Colors.grey.shade300,
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: const Icon(Icons.favorite_border, color: Colors.white, size: 20 )) 
              )
            )] : [])
          ])
        )]),
    );
    return widget.readOnly || widget.low ? w : InkWell( mouseCursor:  SystemMouseCursors.click,
      onTap: () { AppRouter.catalogItem.go(context, { "id" : widget.item.id ?? "" }); },
      child: w );
  } 
}