/// <reference types="react" />
import { BaseResource } from '../../pages/types';
import { ApiSearchParams } from '../../templates/IndexPage/types';
export type CalendarResourcesMetaData<P extends ApiSearchParams> = {
    /**
     * リソース取得対象の開始日の日付クエリパラメータのkey
     */
    startDateQueryKey?: keyof P;
    /**
     * リソース取得対象の終了日の日付クエリパラメータのkey
     */
    endDateQueryKey?: keyof P;
    /**
     * カレンダーで表示する年のクエリパラメータのkey
     */
    yearQueryKey?: keyof P;
    /**
     * カレンダーで表示する月のクエリパラメータのkey
     */
    monthQueryKey?: keyof P;
    /**
     * 表示される年
     */
    year?: number;
    /**
     * 表示される月
     */
    month?: number;
};
export type CalendarOptions = {
    /**
     *  日曜始まりか月曜始まりか
     */
    startDayOfWeek?: 'sunday' | 'monday';
    /**
     * 1日より前、月末より後の日も対象とするか
     */
    enableOutsideDays?: boolean;
    /**
     * 当日より前の日を控えめな表示にするか
     */
    downplayPastDays?: boolean;
    /**
     * 週末（土日）の表示オプション
     * - `hide`: 表示しない
     * - `hideOnMobile`: モバイルでは非表示
     * - `show`: 表示する
     */
    weekendDisplay?: 'hide' | 'hideOnMobile' | 'show';
};
export type MonthSelectorOptions = {
    /**
     * 年月変更UIを表示するかどうか
     * 「直近の月のみ表示する」ような場合にはfalseにして、ページヘッダーのScopeSelectorを利用しても良い
     * default: false
     */
    hidden?: boolean;
    /**
     * 年月変更の最小日付
     */
    minDate?: Date;
    /**
     * 年月変更の最大日付
     */
    maxDate?: Date;
};
export type CalendarAreaProps<R extends BaseResource, P extends ApiSearchParams> = CalendarResourcesMetaData<P> & {
    /**
     * 初期状態で表示される年
     * （ユーザーの操作により、表示されている年月と異なる場合がある）
     */
    year?: number;
    /**
     * 初期状態で表示される月
     * （ユーザーの操作により、表示されている年月と異なる場合がある）
     */
    month?: number;
    /**
     * 取り扱うリソースの配列
     */
    resources?: R[];
    /**
     * 祝日など、特別な日に対するラベル
     */
    dateLabels?: Record<string, string>;
    /**
     * カレンダー表示時の処理
     * API取得用のパラメーターPを引数として受け取ります
     */
    onMonthChange?: (params: Partial<P>) => void;
    /**
     * リソースの日付を取得する
     * このリソースでグルーピングされ、カレンダー上に表示される
     */
    getResourceDate: (resource: R) => Date;
    /**
     * 日ごとのリソースの表示ノードを作る
     */
    iterator: (resources: R[], date: Date) => {
        /**
         * カレンダーに表示されるノード
         */
        node?: React.ReactNode;
        /**
         * 日付クリック時の処理
         */
        onClick?: (resources: R[], date: Date) => void;
        /**
         * 日付に設定されるリンクのURL
         */
        url?: string;
    };
    /**
     * リソースをローディング中かどうか
     * アイテムの代わりにSkeletonを表示
     */
    isLoading?: boolean;
    /**
     * カレンダーマウント時の処理
     */
    /**
     * 選択中の日付
     * 詳細を表示中の日付などがある場合に、その日付を強調表示する
     */
    selectedDate?: Date;
    /**
     * 年月変更UIの表示オプション
     */
    monthSelectorOptions?: MonthSelectorOptions;
    /**
     * カレンダーの表示オプション
     */
    calendarOptions?: CalendarOptions;
};