/packages/react_ui/src/pages/:workspace/calendar/page.tsx at 1c4e2281a7ad022ad06bee91b67d6ad1f32e2820

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

import "../../../polyfill.ts";

import * as proto from "@bufbuild/protobuf";
import { tz } from "@date-fns/tz";
import { CaretLeftIcon, CaretRightIcon, PersonIcon } from "@radix-ui/react-icons";
import {
	Avatar,
	Box,
	Flex,
	Grid,
	IconButton,
	ScrollArea,
	Section,
	Text,
	VisuallyHidden,
} from "@radix-ui/themes";
import { DateSchema } from "@yamori/proto/yamori/type/v1/date_pb.js";
import type { WorkspaceSchema } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js";
import { ListRequestSchema } from "@yamori/proto/yamori/worker/v1/list_request_pb.js";
import { ListResponseSchema } from "@yamori/proto/yamori/worker/v1/list_response_pb.js";
import { WorkerSchema } from "@yamori/proto/yamori/worker/v1/worker_pb.js";
import { LeaveSchema } from "@yamori/proto/yamori/work_record/v1/leave_pb.js";
import { LeaveReadMaskSchema } from "@yamori/proto/yamori/work_record/v1/leave_read_mask_pb.js";
import {
	addMonths,
	subMonths,
	startOfMonth,
	endOfMonth,
	eachDayOfInterval,
} from "date-fns";
import { type FC, Fragment, use, useEffect, useMemo, useRef } from "react";

import { WorkRecordBadges } from "../../../components/WorkRecordBadges.tsx";
import { NavigationContext, URLContext } from "../../../contexts/Router.tsx";
import { useMethodQuery } from "../../../contexts/Service.tsx";
import { IllegalMessageError } from "../../../errors/IllegalMessageError.ts";
import { fromProtoDate, toProtoDate, isSameDate } from "../../../helpers.ts";
import { Layout } from "../Layout.tsx";

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

export const Title: FC = () => "カレンダー";

function addMonthToSearchParams(
	month: proto.MessageShape<typeof DateSchema>,
	base?: URLSearchParams,
): URLSearchParams {
	const params = new URLSearchParams(base);

	params.set("month", `${month.year}-${month.month}`);

	return params;
}

export interface HrefInput {
	workspace: proto.MessageShape<typeof WorkspaceSchema>;

	month?: proto.MessageShape<typeof DateSchema>;
}

export function href({ workspace, month }: HrefInput): string {
	if (!workspace.id) {
		return "/";
	}

	const base = `/${workspace.id.value}/calendar`;
	if (!month) {
		return base;
	}

	return base + "?" + addMonthToSearchParams(month).toString();
}

export const pattern = new URLPattern({
	pathname: "/:workspace/calendar",
});

const leaveMask = proto.create(LeaveReadMaskSchema, {
	fields: [
		LeaveSchema.field.id.number,
		LeaveSchema.field.displayName.number,
		LeaveSchema.field.currentRevision.number,
	],
});

// TODO: どこか共通のファイルで定義する
const TZ = "Asia/Tokyo";

const weekdayFormatter = new Intl.DateTimeFormat(undefined, {
	weekday: "short",
});

interface BodyProps {
	workspaceID: proto.MessageShape<typeof WorkspaceSchema>["id"];

	month: proto.MessageShape<typeof DateSchema>;
}

const Body: FC<BodyProps> = ({ workspaceID, month }) => {
	const { start, end } = useMemo(() => {
		const d = fromProtoDate(month);

		return {
			start: toProtoDate(startOfMonth(d, { in: tz(TZ) })),
			end: toProtoDate(endOfMonth(d, { in: tz(TZ) })),
		} as const;
	}, [month]);

	const query = useMethodQuery({
		service: "yamori.worker.v1.WorkerService",
		method: "List",
		request: {
			schema: ListRequestSchema,
			data: {
				workspaceId: workspaceID,
				workRecordFilter: {
					since: start,
					until: end,
				},
				paidLeaveProvisionFilter: {
					providedAtUntil: end,
					expiresAtSince: start,
				},
				readMask: {
					fields: [
						WorkerSchema.field.id.number,
						WorkerSchema.field.displayName.number,
						WorkerSchema.field.writeWorkRecordKey.number,
						WorkerSchema.field.providePaidLeaveKey.number,
						WorkerSchema.field.workRecords.number,
					],
					workRecordsMask: {
						legalLeaveReadMask: leaveMask,
						specialLeaveReadMask: leaveMask,
					},
				},
			},
		},
		response: {
			schema: ListResponseSchema,
		},
		mapResponse(resp) {
			switch (resp.result.case) {
				case "ok":
					return resp.result.value.workers;
				case undefined:
					throw new IllegalMessageError(resp);
				default:
					throw resp.result.value;
			}
		},
	});

	const dates = useMemo(() => {
		return eachDayOfInterval(
			{
				start: fromProtoDate(start),
				end: fromProtoDate(end),
			},
			{
				in: tz(TZ),
			},
		);
	}, [start, end]);

	const scrollAreaRef = useRef<HTMLDivElement>(null);

	useEffect(() => {
		if (!scrollAreaRef.current) {
			return;
		}

		scrollAreaRef.current.scrollLeft = 0;
	}, [month]);

	return (
		<ScrollArea ref={scrollAreaRef} scrollbars="horizontal" size="2">
			<Grid columns={`max-content repeat(${dates.length}, 5rem)`} pb="4">
				<Box
					className={`${css.rowHeaderCell} ${css.columnHeaderCell}`}
					position="sticky"
					left="0"
					top="0"
					style={{ backgroundColor: "var(--color-background)", zIndex: 50 }}
				/>
				{dates.map((d) => (
					<Flex
						key={+d}
						className={css.rowHeaderCell}
						position="sticky"
						top="0"
						align="baseline"
						justify="center"
						gap="1"
						py="3"
						px="4"
						style={{ zIndex: 10 }}
					>
						<Text size="3" weight="bold">
							{d.getDate()}
						</Text>
						<Text
							size="1"
							weight="bold"
							color={d.getDay() === 0 ? "red" : d.getDay() === 6 ? "blue" : "gray"}
						>
							{weekdayFormatter.format(d)}
						</Text>
					</Flex>
				))}
				{query.data?.map((worker) => {
					return (
						<Fragment key={worker.id?.value}>
							<Flex
								className={css.columnHeaderCell}
								position="sticky"
								left="0"
								style={{ backgroundColor: "var(--color-background)", zIndex: 30 }}
								align="center"
								gap="2"
								px="2"
								py="4"
							>
								<Avatar size="2" fallback={worker.displayName[0] || <PersonIcon />} />
								<Text>{worker.displayName}</Text>
							</Flex>
							{dates.map((date) => {
								const d = toProtoDate(date);
								const record = worker.workRecords.find(
									(record) => record.date && isSameDate(record.date, d),
								);

								return (
									<Flex
										key={+date}
										className={css.recordCell}
										direction="column"
										gap="1"
										p="1"
										minWidth="0"
									>
										{record && <WorkRecordBadges workRecord={record} />}
									</Flex>
								);
							})}
						</Fragment>
					);
				})}
			</Grid>
		</ScrollArea>
	);
};

export interface PageProps {
	workspace: proto.MessageShape<typeof WorkspaceSchema>;
}

export const Page: FC<PageProps> = ({ workspace }) => {
	const navigation = use(NavigationContext);
	const url = use(URLContext);

	const searchParams = useMemo(() => new URLSearchParams(url.search), [url.search]);

	const month = useMemo<proto.MessageShape<typeof DateSchema>>(() => {
		const param = searchParams.get("month");
		if (!param) {
			return toProtoDate(Date.now());
		}

		const tokens = param.split("-").map((s) => parseInt(s, 10));
		if (tokens.length !== 2 || tokens.some((t) => !Number.isFinite(t))) {
			return toProtoDate(Date.now());
		}

		return proto.create(DateSchema, {
			year: tokens[0],
			month: tokens[1],
			day: 1,
		});
	}, [searchParams]);

	// ブラウザのクエリパラメータと month が違う場合は同期させる
	useEffect(() => {
		const next = addMonthToSearchParams(month, searchParams);
		if (next.toString() === searchParams.toString()) {
			return;
		}

		navigation.replace(href({ workspace, month }));
	}, [searchParams, month]);

	return (
		<Layout workspace={workspace} title={<Title />}>
			<Flex align="center" gap="1">
				<IconButton
					variant="soft"
					size="2"
					onClick={() => {
						navigation.replace(
							href({
								workspace,
								month: toProtoDate(subMonths(fromProtoDate(month), 1)),
							}),
						);
					}}
				>
					<CaretLeftIcon />
					<VisuallyHidden>前の月へ</VisuallyHidden>
				</IconButton>
				<Text weight="bold" size="2" align="center" style={{ minWidth: "6rem" }}>
					{month.year}年{month.month}月
				</Text>
				<IconButton
					variant="soft"
					size="2"
					onClick={() => {
						navigation.replace(
							href({
								workspace,
								month: toProtoDate(addMonths(fromProtoDate(month), 1)),
							}),
						);
					}}
				>
					<CaretRightIcon />
					<VisuallyHidden>次の月へ</VisuallyHidden>
				</IconButton>
			</Flex>
			<Section size="2" maxWidth="100%" minWidth="0">
				<Body workspaceID={workspace.id} month={month} />
			</Section>
		</Layout>
	);
};