'use client'

import SingleDatePicker from "@/components/common/datepicker/SingleDatePicker";
import Pagination from "@/components/common/grid/Pagination";
import QGrid from "@/components/common/grid/QGrid";
import { useState } from "react";

const HeaderRadioButton = () => {
    return(
        <div className="d-check-radio pop no-text">
            <input type="radio" name="radio99" id="ra99" disabled/>
            <label htmlFor="ra99"></label>
        </div>
    )
}
const CellRadioButton = () => {
    return(
        <div className="d-check-radio light no-text">
            <input type="radio" name="radio98" id="ra98" />
            <label htmlFor="ra98"></label>
        </div>
    )
}

export default function DesignRequestPop(){
    const [gridProps, setGridProps] = useState({
        gridData: [
            { status: "受付", designRequestNumber: "1000000002", salesAgentID: "", salesAgentName: "", projectName: "名古屋支店テスト", prefecture: "愛知県", installedHouses:"복수곳", clientName: "", submissionDate:"2023.07.02 10:00:00"},
            { status: "受付", designRequestNumber: "1000000002", salesAgentID: "", salesAgentName: "", projectName: "名古屋支店テスト", prefecture: "愛知県", installedHouses:"복수곳", clientName: "", submissionDate:"2023.07.02 10:00:00"},
            { status: "受付", designRequestNumber: "1000000002", salesAgentID: "", salesAgentName: "", projectName: "名古屋支店テスト", prefecture: "愛知県", installedHouses:"복수곳", clientName: "", submissionDate:"2023.07.02 10:00:00"},
            { status: "受付", designRequestNumber: "1000000002", salesAgentID: "", salesAgentName: "", projectName: "名古屋支店テスト", prefecture: "愛知県", installedHouses:"복수곳", clientName: "", submissionDate:"2023.07.02 10:00:00"},
        ],
        gridColumns:[
            { field: "radio", width: 45, cellRenderer: CellRadioButton, headerComponent: HeaderRadioButton,  cellStyle: { display: 'flex', alignItems: 'center', justifyContent: 'center' }},
            { headerName: "状態 ", field: "status", width: 100, cellStyle: { textAlign: "center" } },
            { headerName: "設計依頼番号", field: "designRequestNumber", cellStyle: { textAlign: "center" } },
            { headerName: "販売代理店ID", field: "salesAgentID" },
            { headerName: "販売代理店名", field: "salesAgentName" },
            { headerName: "案件名", field: "projectName" },
            { headerName: "都道府県", field: "prefecture" },
            { headerName: "設置家屋数 ", field: "installedHouses", cellStyle: { textAlign: "center" } },
            { headerName: "依頼者名 ", field: "clientName", cellStyle: { textAlign: "center" } },
            { headerName: "設計依頼提出日 ", field: "submissionDate", cellStyle: { textAlign: "center" } },
        ],
        isPageable: true,
    })

    return(
        <div className="modal-popup">
            <div className="modal-dialog big">
                <div className="modal-content">
                    <div className="modal-header">
                        <h1 className="title">設計依頼のインポート </h1>
                        <button className="modal-close">닫기</button>
                    </div>
                    <div className="modal-body">
                        <div className="modal-body-inner">
                            <div className="design-tit-wrap">
                                <h3>設計依頼検索</h3>
                                <div className="design-search-wrap">
                                    <button className="btn-origin grey mr5">検索</button>
                                    <button className="btn-origin navy ">初期化</button>
                                </div>
                            </div>
                            <div className="design-request-table">
                                <div className="common-table">
                                    <table>
                                        <colgroup>
                                            <col style={{width : '160px'}}/>
                                            <col />
                                            <col style={{width : '160px'}}/>
                                            <col />
                                            <col style={{width : '160px'}}/>
                                            <col />
                                        </colgroup>
                                        <tbody>
                                            <tr>
                                                <th>設計依頼番号</th>
                                                <td>
                                                    <div className="input-wrap">
                                                        <input type="text" className="input-light" />
                                                    </div>
                                                </td>
                                                <th>案件名</th>
                                                <td>
                                                    <div className="input-wrap">
                                                        <input type="text" className="input-light" />
                                                    </div>
                                                </td>
                                                <th>都道府県</th>
                                                <td>
                                                    <div className="input-wrap">
                                                        <input type="text" className="input-light" />
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>販売代理店名</th>
                                                <td>
                                                    <div className="input-wrap">
                                                        <input type="text" className="input-light" />
                                                    </div>
                                                </td>
                                                <th>依頼者名</th>
                                                <td>
                                                    <div className="input-wrap">
                                                        <input type="text" className="input-light" />
                                                    </div>
                                                </td>
                                                <th>状態</th>
                                                <td>
                                                    <div className="select-wrap">
                                                        <select className="select-light" name="" id="" >
                                                            <option>All</option>
                                                        </select>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>期間検索</th>
                                                <td colSpan={5}>
                                                    <div className="form-flex-wrap">
                                                        <div className="radio-wrap mr10">
                                                            <div className="d-check-radio light mr10">
                                                                <input type="radio" name="radio04" id="ra07" />
                                                                <label htmlFor="ra07">提出日</label>
                                                            </div>
                                                            <div className="d-check-radio light">
                                                                <input type="radio" name="radio04" id="ra08" />
                                                                <label htmlFor="ra08">受付日</label>
                                                            </div>
                                                        </div>
                                                        <div className="date-picker-wrap">
                                                            <div className="date-picker" style={{flex: 1}}>
                                                                <SingleDatePicker/>
                                                            </div>
                                                            <span> ~ </span>
                                                            <div className="date-picker" style={{flex: 1}}>
                                                                <SingleDatePicker/>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div className="design-request-grid">
                                <div className="design-request-count">
                                    <div className="design-request-grid-tit">Plan List</div>
                                    <div className="select-wrap">
                                        <select className="select-light" name="" id="" >
                                            <option>20</option>
                                        </select>
                                    </div>
                                </div>
                                <div className='q-grid'>
                                    <QGrid {...gridProps}/>
                                    <div className='pagination-wrap'>
                                        <Pagination/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="footer-btn-wrap">
                            <button className="btn-origin grey mr5">閉じる</button>
                            <button className="btn-origin navy ">選択の適用</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}