import type {SearchParams} from "../../../../../type/searchParams.ts";
import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";

interface BoardListTableHeaderProps {
    params: SearchParams;
    onChange: (params: SearchParams) => void
    checked: boolean
    indeterminate: boolean
    onCheckAll: (checked: boolean) => void
}

export function BoardListTableHeader({
                                         params,
                                         onChange,
                                         checked,
                                         indeterminate,
                                         onCheckAll
                                     }: 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: '40px'}}/>
                <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>
                    <CheckBox
                        id="boardCheckAll"
                        name="checkAll"
                        checked={checked}
                        indeterminate={indeterminate}
                        onChange={onCheckAll}
                    />
                </th>
                <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>
        </>
    )
}