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
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111

import { attr, el, className, svg } from "../../dom";
import { effect } from "../../signal";

import { iconButton } from "../iconButton/iconButton";

export const styles = /* css */ `
  .fp-root {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: var(--bg);
    color: var(--fg);
  }

  .fp-close {
    position: absolute;
    right: 8px;
    top: 8px;

    background-color: inherit;
    border-radius: var(--panel-radii);
    z-index: calc(var(--z-index) + 5);

    opacity: 0.5;
  }
  .fp-close:hover, .fp-close:focus-within {
    opacity: 1;
  }

  .fp-close-icon {
    font-size: calc(var(--font-size) * 1.1);
  }

  .fp-body {
    max-width: 100%;
    max-height: 100%;
    padding: 16px;
    box-sizing: border-box;

    overflow-y: auto;
  }
`;

interface FullscreenPanelProps {
  body: Parameters<typeof el>[2];

  onClose?(): void;
}

export function fullscreenPanel({
  body,
  onClose,
}: FullscreenPanelProps): HTMLElement {
  effect(() => {
    if (!onClose) {
      return;
    }

    const onEsc = (ev: KeyboardEvent) => {
      if (ev.key !== "Escape") {
        return;
      }

      ev.preventDefault();
      ev.stopPropagation();

      onClose();
    };

    document.addEventListener("keydown", onEsc);

    return () => {
      document.removeEventListener("keydown", onEsc);
    };
  });

  return el(
    "div",
    [className("fp-root")],
    [
      onClose
        ? el(
            "div",
            [className("fp-close")],
            [
              iconButton({
                title: "Close",
                icon: svg(
                  "svg",
                  [
                    className("fp-close-icon"),
                    attr("viewBox", "0 0 10 10"),
                    attr("fill", "none"),
                    attr("stroke", "currentColor"),
                  ],
                  [svg("path", [attr("d", "M2,2 L8,8 M8,2 L2,8")])],
                ),
                onClick() {
                  onClose();
                },
              }),
            ],
          )
        : null,
      el("div", [className("fp-body")], body),
    ],
  );
}