import type {ChangeEvent} from "react";
import type {BoardFormItem} from "../type/boardMaster.types.ts";

type BoardFormTableProps = {
    form: BoardFormItem;
    onChange: (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
};

export const BoardFormTable = ({
                                   form,
                                   onChange
                               }: BoardFormTableProps) => {
    return (
        <div className="table table_type_rows">
            <table>
                <colgroup>
                    <col style={{width: '200px'}}/>
                    <col style={{width: 'auto'}}/>
                </colgroup>

                <tbody>
                <tr>
                    <th>
                        <span className="required">*</span>
                        게시판명
                    </th>
                    <td>
                        <input
                            type="text"
                            className="input"
                            id="bbsNm"
                            name="bbsNm"
                            value={form.bbsNm}
                            onChange={onChange}
                        />
                    </td>
                </tr>

                <tr>
                    <th>
                        <span className="required">*</span>
                        게시판유형
                    </th>

                    <td>
                        <label>
                            <input
                                id="bbsTyCode_BBST01"
                                type="radio"
                                value="BBST01"
                                name="bbsTyCode"
                                checked={form.bbsTyCode === 'BBST01'}
                                onChange={onChange}
                            />
                            일반게시판
                        </label>

                        <label>
                            <input
                                id="bbsTyCode_BBST05"
                                type="radio"
                                value="BBST05"
                                name="bbsTyCode"
                                checked={form.bbsTyCode === 'BBST05'}
                                onChange={onChange}
                            />
                            포토형게시판
                        </label>
                    </td>
                </tr>

                <tr>
                    <th>
                        <span className="required">*</span>
                        공지기능
                    </th>
                    <td>
                        <select
                            id="noticeYn"
                            name="noticeYn"
                            value={form.noticeYn}
                            onChange={onChange}
                        >
                            <option value="Y">사용</option>
                            <option value="N">미사용</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th>
                        <span className="required">*</span>
                        댓글기능
                    </th>
                    <td>
                        <select
                            id="addYn"
                            name="addYn"
                            value={form.addYn}
                            onChange={onChange}
                        >
                            <option value="Y">사용</option>
                            <option value="N">미사용</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th>
                        <span className="required">*</span>
                        파일첨부기능
                    </th>
                    <td>
                        <select
                            id="fileAtchPosblAt"
                            name="fileAtchPosblAt"
                            value={form.fileAtchPosblAt}
                            onChange={onChange}
                        >
                            <option value="Y">사용</option>
                            <option value="N">미사용</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th>
                        <span className="required">*</span>
                        파일첨부갯수
                    </th>
                    <td>
                        <select
                            id="posblAtchFileNumber"
                            name="posblAtchFileNumber"
                            value={form.posblAtchFileNumber}
                            onChange={onChange}
                        >
                            <option value="0">없음</option>
                            <option value="1">1</option>
                            <option value="9">9</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th>
                        <span className="required">*</span>
                        파일첨부사이즈
                    </th>
                    <td>
                        <input
                            type="number"
                            className="input"
                            id="posblAtchFileSize"
                            name="posblAtchFileSize"
                            value={form.posblAtchFileSize}
                            onChange={onChange}
                        />
                    </td>
                </tr>

                <tr>
                    <th>
                        <span className="required">*</span>
                        조회수 노출여부
                    </th>
                    <td>
                        <select
                            id="viewsYn"
                            name="viewsYn"
                            value={form.viewsYn}
                            onChange={onChange}
                        >
                            <option value="Y">사용</option>
                            <option value="N">미사용</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th>
                        <span className="required">*</span>
                        게시판 사용여부
                    </th>
                    <td>
                        <select
                            id="useAt"
                            name="useAt"
                            value={form.useAt}
                            onChange={onChange}
                        >
                            <option value="Y">사용</option>
                            <option value="N">미사용</option>
                        </select>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    );
};