import type {BoardArticleSearchParams} from "../type/boardArticle.types.ts";
import {CheckBox} from "../../../../component/checkbox/CheckBox.tsx";
import {useTableSort} from "../../../../hook/useTableSort.ts";
import {SortableHeaderCell} from "../../../../component/table/SortableHeaderCell.tsx";

type BoardArticleListTableHeaderProps = {
    params: BoardArticleSearchParams;
    onChange: (params: BoardArticleSearchParams) => void;
    checked: boolean;
    indeterminate: boolean;
    onCheckAll: (checked: boolean) => void;
}

export const BoardArticleListTableHeader = ({
                                                params,
                                                onChange,
                                                checked,
                                                indeterminate,
                                                onCheckAll,
                                            }: BoardArticleListTableHeaderProps) => {
    const {handleSort, getSortIcon, isSorted} = useTableSort(params, onChange);


    return (
        <>
            <colgroup>
                <col style={{width: "40px"}}/>
                <col style={{width: "6%"}}/>
                <col style={{width: "auto"}}/>
                <col style={{width: "15%"}}/>
                <col style={{width: "15%"}}/>
                <col style={{width: "10%"}}/>
                <col style={{width: "12%"}}/>
                <col style={{width: "8%"}}/>
            </colgroup>

            <thead>
            <tr>
                <th>
                    <CheckBox
                        id="checkAll"
                        name="checkAll"
                        checked={checked}
                        indeterminate={indeterminate}
                        onChange={onCheckAll}
                    />
                </th>
                <th>번호</th>
                <th scope={"col"}>
                    제목
                </th>
                <th scope={"col"}>
                    첨부파일
                </th>
                <th scope={"col"}>
                    공개여부
                </th>
                <th scope="col">???</th>
                <SortableHeaderCell
                    field="FRST_REGIST_PNTTM"
                    active={isSorted('FRST_REGIST_PNTTM')}
                    icon={getSortIcon('FRST_REGIST_PNTTM')}
                    onSort={handleSort}
                >
                    ???
                </SortableHeaderCell>
                <th scope="col">조회수</th>
            </tr>
            </thead>
        </>
    )
}