import { handler, pattern, UI, type Writable } from "commonfabric";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "cf-button": any;
    }
  }
}

interface Item {
  id: string;
}

interface State {
  items: Item[];
  log: Writable<string[]>;
  prefix: Writable<string>;
}

const record = handler<
  unknown,
  { log: Writable<string[]>; prefix: Writable<string>; id: string }
>((_, state) => {
  state.log.push(`${state.prefix.get()}:${state.id}`);
});

const moduleStyle = { color: "red" };

// FIXTURE: map-captured-object-spread
// Verifies: a spread of a captured `const` whose keys are known where it is
//   declared, in a reactive `.map()` callback, is written out as the
//   properties it copies
//   { ...records, id: item.id } → { log: records.key("log"), prefix: records.key("prefix"), id: ... }
//   { ...moduleStyle }          → unchanged (a module binding is not captured)
//   { ...withPrototype }        → { log: withPrototype.key("log") }, since
//                                 `__proto__: null` sets the prototype
//   { ...ownProto }             → { ["__proto__"]: ownProto.key("__proto__") },
//                                 since the shorthand makes an own property
//   { ...nested }               → { color: nested.key("color"), log: nested.key("log"),
//                                   prefix: nested.key("prefix") }, the keys
//                                 the literal's own spreads copy, a module
//                                 binding's included
//   { ...numbered }             → { 0: numbered.key("0") }
//   { ...aliased }              → { log: aliased.key("log"), prefix: aliased.key("prefix") },
//                                 the keys of the literal the alias names
// Context: the capture reaches the callback as an opaque reference, which has
//   no keys to spread
export default pattern<State>(({ items, log, prefix }) => {
  const records = { log, prefix };
  const withPrototype = { __proto__: null, log };
  const __proto__ = "own";
  const ownProto = { __proto__ };
  const nested = { ...moduleStyle, ...records };
  const numbered = { 0: log };
  const aliased = records;
  return {
    [UI]: (
      <div>
        {items.map((item) => (
          <cf-button
            style={{ ...moduleStyle }}
            onClick={record({ ...records, id: item.id })}
            onDblClick={record({ ...withPrototype, prefix, id: item.id })}
            data={{ ...ownProto }}
            nested={{ ...nested }}
            numbered={{ ...numbered }}
            aliased={{ ...aliased }}
          >
            {item.id}
          </cf-button>
        ))}
      </div>
    ),
  };
});