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

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

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

    return (
        <>
            <colgroup>
                <col style={{width: "40px"}}/>
                <col style={{width: "6%"}}/>
                <col style={{width: "calc((54%/2) - 40px)"}}/>
                <col style={{width: "calc((54%/2) - 40px)"}}/>
                <col style={{width: "10%"}}/>
                <col style={{width: "20%"}}/>
                <col style={{width: "10%"}}/>
            </colgroup>
            <thead>
            <tr>
                <th>
                    <CheckBox id="contentCheckAll"
                              name="checkAll"
                              checked={checked}
                              onChange={onCheckAll}
                              indeterminate={indeterminate}/>
                </th>
                <SortableHeaderCell field={"cntId"} active={isSorted("cntId")} icon={getSortIcon("cntId")} onSort={handleSort}>번호</SortableHeaderCell>
                <SortableHeaderCell field={"cntName"} active={isSorted("cntName")} icon={getSortIcon("cntName")} onSort={handleSort}>콘텐츠이름</SortableHeaderCell>
                <SortableHeaderCell field={"menuNm"} active={isSorted("menuNm")} icon={getSortIcon("menuNm")} onSort={handleSort}>연결메뉴</SortableHeaderCell>
                <SortableHeaderCell field={"registerId"} active={isSorted("registerId")} icon={getSortIcon("registerId")} onSort={handleSort}>등록자</SortableHeaderCell>
                <SortableHeaderCell field={"registPnttm"} active={isSorted("registPnttm")} icon={getSortIcon("registPnttm")} onSort={handleSort}>등록일자</SortableHeaderCell>
                <th scope={"col"}>미리보기</th>
            </tr>
            </thead>
        </>
    )
}