1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98

// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import { type Workspace } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js";

import { YamoriButton } from "../../components/button/button.ts";

import { wrapElement, YamoriElement } from "../../element.ts";

import css from "./workspace-list-entry.css?inline";

export class OpenEvent extends Event {
	constructor(public readonly workspace: Workspace) {
		super("open", {
			bubbles: true,
			cancelable: true,
			composed: true,
		});
	}
}

export const YamoriWorkspaceListEntry = wrapElement({
	tagName: "yamori-workspace-list-entry",
	dependencies: [YamoriButton],
	constructor: class extends YamoriElement {
		#shadow: ShadowRoot;
		#startMarker: Comment;
		#endMarker: Comment;
		#workspace: Workspace | null = null;

		constructor() {
			super();

			this.#shadow = this.attachShadow({
				mode: "open",
			});

			const style = document.createElement("style");
			style.textContent = css;
			this.#shadow.appendChild(style);

			this.#startMarker = document.createComment("");
			this.#shadow.appendChild(this.#startMarker);

			this.#endMarker = document.createComment("");
			this.#shadow.appendChild(this.#endMarker);

			this.internals.role = "listitem";
		}

		override connectedCallback(): void {
			super.connectedCallback();

			this.#render();
		}

		#render = (): void => {
			const range = document.createRange();
			range.setStartAfter(this.#startMarker);
			range.setEndBefore(this.#endMarker);
			range.deleteContents();

			const workspace = this.#workspace;

			if (!workspace) {
				this.setCustomState("nodata");
				return;
			}

			this.removeCustomState("nodata");

			const label = document.createElement("span");
			label.textContent = "Workspace";
			label.classList.add("label");
			this.#shadow.insertBefore(label, this.#endMarker);

			const displayName = document.createElement("span");
			displayName.textContent = workspace.displayName;
			displayName.classList.add("display-name");
			this.#shadow.insertBefore(displayName, this.#endMarker);

			const button = document.createElement(YamoriButton.tagName);
			button.textContent = "開く";
			this.#shadow.insertBefore(button, this.#endMarker);
			button.addEventListener("click", (event) => {
				event.preventDefault();
				event.stopPropagation();

				this.dispatchEvent(new OpenEvent(workspace));
			});
		};

		setWorkspace(workspace: Workspace) {
			this.#workspace = workspace;
			this.#render();
		}
	},
});