'use client';

import { useRouter } from 'next/navigation';
import { useState, type ChangeEvent } from 'react';
import { Button } from '@/components/ui/button';
import { Select } from '@/components/ui/select';
import type { BoardType } from '@/lib/domain/board-post';
import {
  BOARD_PAGE_SIZE_OPTIONS,
  buildBoardPostHref,
  type BoardPageSize,
  type BoardPostQuery,
} from '@/lib/domain/board-post-query';
import { BoardPostFormModal } from './board-post-form-modal';

interface BoardListToolbarProps {
  boardType: BoardType;
  query: BoardPostQuery;
  /** 1:1문의는 관리자가 글을 등록하지 않으므로 false다(사용자 확인 사항). */
  canCreate: boolean;
}

/**
 * 목록 툴바 — [신규 등록]과 페이지 크기 select. 페이지 크기가 바뀌면 1페이지로 되돌린다
 * (기존 페이지 번호가 새 크기 기준으로는 의미가 달라지므로).
 *
 * 시안의 "최근등록순" 정렬 select는 두지 않았다 — 백엔드 목록 SQL의 정렬이 최신순으로 고정돼
 * 있고 시안의 select에도 다른 선택지가 없어, 선택지가 하나뿐인 컨트롤이 되기 때문이다.
 * 정렬 기준이 추가되면 그때 select를 붙인다.
 */
export function BoardListToolbar({
  boardType,
  query,
  canCreate,
}: BoardListToolbarProps) {
  const router = useRouter();
  const [isCreateOpen, setIsCreateOpen] = useState(false);

  function handlePageSizeChange(event: ChangeEvent<HTMLSelectElement>) {
    const pageSize = Number(event.target.value) as BoardPageSize;
    router.replace(buildBoardPostHref(boardType, query, { pageSize, page: 1 }));
  }

  return (
    <div className="flex flex-wrap items-center justify-end gap-3">
      {canCreate && (
        <Button
          type="button"
          variant="primary"
          onClick={() => setIsCreateOpen(true)}
        >
          + 신규 등록
        </Button>
      )}

      <Select
        name="pageSize"
        aria-label="페이지 크기"
        defaultValue={query.pageSize}
        onChange={handlePageSizeChange}
      >
        {BOARD_PAGE_SIZE_OPTIONS.map((size) => (
          <option key={size} value={size}>
            {size}개씩
          </option>
        ))}
      </Select>

      {isCreateOpen && (
        <BoardPostFormModal
          boardType={boardType}
          mode="create"
          onClose={() => setIsCreateOpen(false)}
        />
      )}
    </div>
  );
}