import type {BoardArticleSearchParams} from "../../type/board.types.ts";
import {CheckBox} from "../../../../component/checkbox/CheckBox.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 = (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: "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>
                <th scope="col">작성일
                    <button
                        className={`sort sortBtn ${params.searchSortCnd === 'FRST_REGIST_PNTTM' ? 'active' : ''}`}
                        onClick={() => handleSort('FRST_REGIST_PNTTM')}
                    >
                        {getSortIcon('FRST_REGIST_PNTTM')}
                    </button>
                </th>
                <th scope="col">조회수</th>
            </tr>
            </thead>
        </>
    )
}