'use client'

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 FindAddressPop(){
    const [gridProps, setGridProps] = useState({
        gridData: [
            { city: "Address1を表示", district: "Address2を表示", municipal: "Address3を表示" },
            { city: "Address1を表示", district: "Address2を表示", municipal: "Address3を表示" },
            { city: "Address1を表示", district: "Address2を表示", municipal: "Address3を表示" },
        ],
        gridColumns:[
            { field: "radio", width: 45, cellRenderer: CellRadioButton, headerComponent: HeaderRadioButton,  cellStyle: { display: 'flex', alignItems: 'center', justifyContent: 'center' }},
            { headerName: "都道府県", field: "city", flex: 1 },
            { headerName: "市区町村", field: "district", flex: 1 },
            { headerName: "市区町村以下", field: "municipal", flex: 1 },
        ],
        isPageable: true,
    })

    return(
        <div className="modal-popup">
            <div className="modal-dialog middle">
                <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="address-input-wrap">
                                <input type="text" className="address-input" placeholder='郵便番号の7桁を入力してください。'/>
                                <button className="search-btn"></button>
                            </div>
                            <div className="address-grid">
                                <div className='q-grid'>
                                    <QGrid {...gridProps}/>
                                </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>
    )
}