import type {SearchParams} from "../../../../type/searchParams.ts";

interface BoardListTableHeaderProps {
    params: SearchParams;
    onChange: (params: SearchParams) => void
}

export function BoardListTableHeader({params, onChange}: BoardListTableHeaderProps) {
    const handleSort = (field: string) => {

        const nextOrder =
            params.searchSortCnd === field &&
            params.searchSortOrd === 'ASC'
                ? 'DESC'
                : 'ASC';

        onChange({
            ...params,
            searchSortCnd: field,
            searchSortOrd: nextOrder,
            pageIndex: 1,
        });
    };

    const getSortIcon = (field: string) => {

        if (params.searchSortCnd !== field) {
            return '-';
        }

        return params.searchSortOrd === 'ASC'
            ? '▲'
            : '▼';
    };

    return (
        <>
            <colgroup>
                <col style={{width: '6%'}}/>
                <col style={{width: '18%'}}/>
                <col style={{width: '18%'}}/>
                <col style={{width: '10%'}}/>
                <col style={{width: '10%'}}/>
                <col style={{width: '10%'}}/>
                <col style={{width: '6%'}}/>
                <col style={{width: '20%'}}/>
            </colgroup>

            <thead>
            <tr>
                <th>번호</th>
                <th>
                    게시판명
                    <button
                        className={`sort sortBtn ${params.searchSortCnd === 'BBS_NM' ? 'active' : ''}`}
                        onClick={() => handleSort('BBS_NM')}
                    >
                        {getSortIcon('BBS_NM')}
                    </button>
                </th>
                <th>
                    연결 메뉴
                    <button
                        className={`sort sortBtn ${params.searchSortCnd === 'MENU_NM' ? 'active' : ''}`}
                        onClick={() => handleSort('MENU_NM')}
                    >
                        {getSortIcon('MENU_NM')}
                    </button>
                </th>
                <th>
                    댓글 / 글수
                    <button
                        className={`sort sortBtn ${params.searchSortCnd === 'TOTCNT' ? 'active' : ''}`}
                        onClick={() => handleSort('TOTCNT')}
                    >
                        {getSortIcon('TOTCNT')}
                    </button>
                </th>
                <th>
                    게시판유형
                    <button
                        className={`sort sortBtn ${params.searchSortCnd === 'BBS_TY_CODE_NM' ? 'active' : ''}`}
                        onClick={() => handleSort('BBS_TY_CODE_NM')}
                    >
                        {getSortIcon('BBS_TY_CODE_NM')}
                    </button>
                </th>
                <th>
                    생성일
                    <button
                        className={`sort sortBtn ${params.searchSortCnd === 'FRST_REGIST_PNTTM' ? 'active' : ''}`}
                        onClick={() => handleSort('FRST_REGIST_PNTTM')}
                    >
                        {getSortIcon('FRST_REGIST_PNTTM')}
                    </button>
                </th>
                <th>
                    사용여부
                    <button
                        className={`sort sortBtn ${params.searchSortCnd === 'USE_AT' ? 'active' : ''}`}
                        onClick={() => handleSort('USE_AT')}
                    >
                        {getSortIcon('USE_AT')}
                    </button>
                </th>
                <th>게시판 관리</th>
            </tr>
            </thead>
        </>
    )
}