class MySwitcher extends StatelessWidget {
  const MySwitcher({super.key});

  @override
  Widget build(BuildContext context) {
    final status = context.select((MyBloc bloc) => bloc.state.status);
    switch (status) {
      case MyStatus.initial:
      case MyStatus.loading:
        return const Center(child: CircularProgressIndicator());
      case MyStatus.success:
        return const MyView();
      case MyStatus.error:
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('Something went wrong.'),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {
                  context.read<MyBloc>().add(MyDataRequested());
                },
                child: const Text('Try again'),
              ),
            ],
          ),
        );
    }
  }
}

// PAGE
class MyPage extends StatelessWidget {
  const MyPage({super.key});
 
  static String path = 'my';
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Inject Bloc(s)
      body: BlocProvider(
        create: (context) => MyBloc(
          dependency: context.read<Dependency>(),
        )..add(MyDataRequested()),
        // SWITCHER
        // MySwitcher, and all its nested child Widgets, will have access to MyBloc
        child: const MySwitcher(),
      ),
    );
  }
}

class MyBloc extends Bloc<MyEvent, MyState> {
  MyBloc({required Dependency dependency})
      : _dependency = dependency,
        super(const MyState()) {
    on<MyDataRequested>(_dataRequested);
  }

  final Dependency _dependency;

  FutureOr<void> _dataRequested(
    MyDataRequested event,
    Emitter<MyState> emit,
  ) async {
    emit(state.copyWith(status: MyStatus.loading));
    try {
      final myAsyncData = await _dependency.asyncCall();
      emit(
        state.copyWith(
          myAsyncData: myAsyncData,
          status: MyStatus.success,
        ),
      );
    } catch (error, stackTrace) {
      addError(error, stackTrace);
      emit(state.copyWith(status: MyStatus.error));
    }
  }
}

enum MyStatus { initial, loading, success, error }

class MyState extends Equatable {
  const MyState({
    this.myAsyncData,
    this.status = MyStatus.initial,
  });

  final AsyncData? myAsyncData;
  final MyStatus status;

  @override
  List<Object> get props => [myAsyncData, status];

  // Creates a new state with the changed data keeping the BlocState immutable
  MyState copyWith({
    AsyncData? myAsyncData,
    MyStatus? status,
  }) {
    return MyState(
      myAsyncData: myAsyncData ?? this.myAsyncData,
      status: status ?? this.status,
    );
  }
}

// PAGE
class MyPage extends StatelessWidget {
  const MyPage({super.key});
 
  static String path = 'my';
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Inject Bloc(s)
      body: BlocProvider(
        create: (context) => MyBloc(dependency: context.read<Dependency>()),
        // VIEW
        // MyView, and all its nested child Widgets, will have access to MyBloc
        child: const MyView(),
      ),
    );
  }
}

#nextpre{
    display: flex;
    justify-content: flex-end;
    margin-right: 6%; 
} 
.next-prev-icon{
        margin: 0 0 20px 20px;
    padding: 5px 10px;
    font-weight: 500;
    color: #fff;
    box-shadow: #0003 0 20px 30px;
    background-color: #000;
    border-radius: 10px;
    text-decoration: unset;
    width: 100px;
    text-align: center;
    font-size: 15px;
}  
  

UIApplication.shared.open(URL(string: "http://www.google.com")!, options: [:], completionHandler: nil)

(async () => {
  let threshold = 1000; // only show load times for widgets higher than this value (in milliseconds)
  var wa = $("div [widget='widget']").css("border", "1px solid red").css("padding-top", "20px").css("position", "relative")
  let widgetTable = [];
  let wmk = [];
  for (var i = 0; i < wa.length; i++) {
    let widgetEntry = {};
    $0 = wa[i]
    let scope = $($0).scope();
    try{
      var widget = scope.widget;
    } catch(e){
      console.error(e);
      continue;
    }
    var timing = 0;
    let elem = $("<div style='position: absolute; top: 1px; left: 1px'><a target='_blank' href='/$sp.do?id=widget_editor&sys_id=" + widget.sys_id + "'> " + widget.name + "</a>&nbsp;&nbsp;</div>");
    var printScope = $("<a href='javascript:void(0);'>Print scope </a>").on('click', function() {
      console.info(scope);
    });
    elem.append(printScope);
    widgetEntry.name = widget.name;
    widgetEntry.rectangle = widget.rectangle_id || 'undefined';
    widgetEntry.sys_id = widget.sys_id;
    let id = scope.widget.rectangle_id + "_" + scope.$id

    // if this is not a nested widget, go ahead and refresh it.
    if (!scope.$parent || !scope.$parent.widget) {
      var widget_name = widget.name;
      var t0 = performance.now();
      await scope.server.refresh();
      var t1 = performance.now();
      timing = "<div style='float:right;color:red;' id='" + id + "'> Load Time: " + parseInt(t1 - t0) + " ms.</div>";
      widgetEntry.load_time_ms = parseInt(t1 - t0) || 0;
      elem.append(timing);
    }
    // add a button to refresh manually.
    var loadTime = $("<button style='border-radius: 50%;'> ⟳ </button>").on('click', function() {
      var widget_name = scope.widget.name;
      let id = scope.widget.rectangle_id + "_" + scope.$id
      var t0 = performance.now();
      scope.server.refresh().then(() => {
        var t1 = performance.now();
        timing = "<div style='float:right;color:red;' id='" + id + "'> Load Time: " + parseInt(t1 - t0) + " ms.</div>";
        widgetEntry.load_time_ms = parseInt(t1 - t0) || 0;
        if ($('#' + id)) {
          $('#' + id).remove();
        }

        elem.append(timing);
        console.log("Call to " + widget_name + " took " + (t1 - t0) + " ms.");
      });
    });

    elem.append(loadTime);
    $($0).append(elem);
    widgetTable.push(widgetEntry);
  }
  widgetTable.sort((a, b) => (a.load_time_ms > b.load_time_ms) ? 1 : -1);
  var slow = widgetTable.filter((e, i, w) => {
    return e.load_time_ms >= threshold;
  });

  let mkdn = `|Name|sys_id|rectangle_id|Load Time Ms|
|:---:|:---:|:---:|:---:|
${slow.map((widgetEntry, i, widgetTable) => {
return `|${widgetEntry.name}|${widgetEntry.sys_id}|${widgetEntry.rectangle}|${widgetEntry.load_time_ms}|`;
}).join("\n")}`;
  var doCopy = function() {
    var el = document.createElement('textarea');
    el.value = mkdn;
    el.setAttribute('readonly', '');
    el.style = {
      position: 'absolute',
      left: '-9999px'
    };
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
  }
  var elem = `<div style="float: right;
z-index: 1;
position: relative;
left: -50%; /* or right 50% */
text-align: left;
padding:10px">
<h2>${(slow.length > 0)?"Slow Widgets:" : "No Slow Widgets Found!"}</h2>
<table style="padding:3px; display:${(slow.length > 0)?"table":"none"}">
<tr><td style="padding:3px;" >Name</td><td style="padding:3px;">sys_id</td><td style="padding:3px;">rectangle id</td><td style="padding:3px;">load time ms</td></tr>
${slow.map((widgetEntry, i, widgetTable) => {
return `<tr><td style="padding:3px;">${widgetEntry.name}</td><td style="padding:3px;">${widgetEntry.sys_id}</td><td style="padding:3px;">${widgetEntry.rectangle}</td><td style="padding:3px;">${widgetEntry.load_time_ms}</td></tr>`;
}).join(" ")}
</table>
<button onClick=${doCopy()} style="display:${(slow.length > 0)?"table":"none"}">Copy Markdown</button>
</div>`;
  $('body').append(elem);
})();