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

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

import { Box, Button, Dialog, Flex, Spinner, Text } from "@radix-ui/themes";
import { useQuery } from "@tanstack/react-query";
import { createContext, type FC, type ReactNode, use, useMemo } from "react";

import { ErrorCallout } from "../ErrorCallout.ts";

interface ThirdPartyNoticeContextValue {
	text(): string | ReactNode | Promise<string | ReactNode>;
}

const Context = createContext<ThirdPartyNoticeContextValue | null>(null);

export const ThirdParty: FC = () => {
	const ctx = use(Context);

	if (!ctx) {
		return null;
	}

	return <Provided value={ctx} />;
};

export interface ThirdPartyNoticeProviderProps {
	text: string | ReactNode | ThirdPartyNoticeContextValue["text"];

	children: ReactNode;
}

export const ThirdPartyNoticeProvider: FC<ThirdPartyNoticeProviderProps> = ({
	children,
	text,
}) => {
	const value = useMemo((): ThirdPartyNoticeContextValue => {
		return {
			text: typeof text === "function" ? text : () => text,
		};
	}, [text]);

	return <Context.Provider value={value}>{children}</Context.Provider>;
};

interface ProvidedProps {
	value: ThirdPartyNoticeContextValue;
}

const Provided: FC<ProvidedProps> = ({ value }: ProvidedProps) => {
	const query = useQuery({
		queryFn() {
			return value.text();
		},
		queryKey: ["CopyrightNotice.ThirdParty.text"],
	});

	return (
		<Dialog.Root>
			<Dialog.Trigger>
				<Button size="1" variant="ghost">
					ライセンス
				</Button>
			</Dialog.Trigger>

			<Dialog.Content maxHeight="calc(100dvh - var(--space-6) * 2)">
				<Dialog.Title>ライセンス</Dialog.Title>
				<Dialog.Description mb="3">
					このアプリケーションでは以下のソフトウェアを利用しています。
				</Dialog.Description>
				<Box style={{ whiteSpace: "pre-wrap" }}>
					{query.isError ? (
						<ErrorCallout
							title="読み込みに失敗しました"
							severity="danger"
							actions={
								<Button size="1" onClick={() => void query.refetch()}>
									再試行
								</Button>
							}
						>
							{query.error instanceof Error ? query.error.message : String(query.error)}
						</ErrorCallout>
					) : query.isLoading ? (
						<Flex gap="2" align="center">
							<Spinner />
							<Text color="gray" size="2">
								読込中
							</Text>
						</Flex>
					) : (
						query.data
					)}
				</Box>
				<Flex position="sticky" bottom="0" justify="end" mt="5">
					<Dialog.Close>
						<Button>閉じる</Button>
					</Dialog.Close>
				</Flex>
			</Dialog.Content>
		</Dialog.Root>
	);
};