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
112. 112
113. 113
114. 114
115. 115
116. 116
117. 117
118. 118
119. 119

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

import { HamburgerMenuIcon } from "@radix-ui/react-icons";
import {
	Box,
	type BoxProps,
	Container,
	Flex,
	Grid,
	Heading,
	IconButton,
} from "@radix-ui/themes";
import { type Workspace } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js";
import { type FC, type ReactNode, use, useCallback, useState } from "react";

import * as NavigationMenu from "../../components/NavigationMenu.ts";
import { URLContext } from "../../contexts/Router.tsx";
import { useViewTransition } from "../../hooks/useViewTransition.ts";

import * as workers from "./workers/page.tsx";
import * as workersNew from "./workers/new/page.tsx";

import css from "./Layout.module.css";

export interface LayoutProps extends Pick<BoxProps, "className" | "children" | "style"> {
	title: ReactNode;

	/**
	 * この画面 (シーン) にグローバルな操作・アクション。
	 * Flex コンテナ内となるため、 Fragment で渡すとレイアウトされる。
	 */
	actions?: ReactNode;

	defaultMenuOpened?: boolean;

	workspace: Workspace;
}

export const Layout: FC<LayoutProps> = ({
	children,
	title,
	actions,
	defaultMenuOpened = false,
	workspace,
	...rest
}) => {
	const viewTransition = useViewTransition();

	const url = use(URLContext);

	const [isMenuOpened, setIsMenuOpened] = useState(defaultMenuOpened);

	const toggleMenu = useCallback(() => {
		viewTransition(() => {
			setIsMenuOpened((prev) => !prev);
		});
	}, [viewTransition]);

	return (
		<Grid
			{...rest}
			inset="0"
			height="100%"
			columns={{ initial: "1", md: "minmax(15rem, max-content) minmax(0, 1fr)" }}
			rows="max-content minmax(0, 1fr)"
			gapY="2"
		>
			<Box className={css.appbar} display={{ initial: "none", md: "block" }} />
			<Flex className={css.appbar} p="2" align="center" gapX="3">
				<Box display={{ md: "none" }}>
					<IconButton variant="soft" onClick={toggleMenu}>
						<HamburgerMenuIcon />
					</IconButton>
				</Box>
				<Container size={{ initial: "4", md: "2", lg: "3" }}>
					<Flex align="center" minHeight="var(--space-6)">
						<Box flexGrow="1" flexShrink="1">
							<Heading size="3">{title}</Heading>
						</Box>
						{actions && (
							<Flex justify="end" gapX="1">
								{actions}
							</Flex>
						)}
					</Flex>
				</Container>
			</Flex>
			<Box
				className={css.menu}
				p="2"
				gridRowStart="2"
				gridColumnStart="1"
				display={{ initial: isMenuOpened ? "block" : "none", md: "block" }}
			>
				<NavigationMenu.Root>
					<NavigationMenu.Group title="労働者管理">
						<NavigationMenu.Item current={workers.pattern.test(url)}>
							<a href={`/${workspace.id?.value}/workers`}>労働者一覧</a>
						</NavigationMenu.Item>
						{workspace.workerAddKey && (
							<NavigationMenu.Item current={workersNew.pattern.test(url)}>
								<a href={`/${workspace.id?.value}/workers/new`}>労働者登録</a>
							</NavigationMenu.Item>
						)}
					</NavigationMenu.Group>
				</NavigationMenu.Root>
			</Box>
			<Container
				size={{ initial: "2", lg: "3" }}
				p="2"
				gridRowStart="2"
				gridColumnStart={{ initial: "1", md: "2" }}
			>
				{children}
			</Container>
		</Grid>
	);
};