import ColorPicker from "@/components/common/colorpicker/ColorPicker";
import RangeDatePicker from "@/components/common/datepicker/RangeDatePicker";
import SingleDatePicker from "@/components/common/datepicker/SingleDatePicker";
import Qselect from "@/components/common/select/Qselect";
import '@/styles/_inputcommon.scss'

export default function InputWrapPage (){
    const SelectOption = [
        {name: 'オンライン保証シ',}, {name: 'ステム'}
    ]
    return(
        <div>
            <h1 className="title">dark</h1>
            <div className="input-content">
                <div className="input-wrap">
                    <h1>BTN WRAP</h1>
                    <div className="form-btn">
                        <button className="btn-frame deepgray">屋根面の割り当て</button>
                        <button className="btn-frame gray">屋根面の割り当て</button>
                        <button className="btn-frame modal">屋根面の割り当て</button>
                        <button className="btn-frame modal act">屋根面の割り当て</button>
                        <button className="btn-frame small dark">移動</button>
                    </div>
                </div>
                <div className="input-wrap">
                    <h1>Select WRAP</h1>
                    <div className="form-select">
                        <Qselect title={'Q.ORDER'} option={SelectOption}/>
                    </div>
                </div>
                <div className="input-wrap">
                    <h1>Input WRAP</h1>
                    <div className="form-input">
                        <label htmlFor="">長さ (mm)</label>
                        <input type="text"  className="input-origin" placeholder="asdasd"/>
                    </div>
                    <div>
                    <input type="text"  className="input-origin" placeholder="asdasd"/>
                    </div>
                    <div>
                    <input type="number"  className="input-origin" placeholder="asdasd"/>
                    </div>
                </div>
                
                <div className="input-wrap">
                    <h1>colorpicker</h1>
                    <div className="form-colorpicker">
                        <ColorPicker/>
                    </div>
                </div>
                <div className="input-wrap">
                    <h1>Check-Btn</h1>
                    <div className="form-Check-btn">
                        <button className="check-btn">
                            <span className="check-area"></span>
                            <span className="title-area">ü割り当て表示</span>
                        </button>
                        <button className="check-btn act">
                            <span className="check-area"></span>
                            <span className="title-area">ü割り当て表示</span>
                        </button>
                    </div>
                </div>
                <div className="input-wrap">
                    <h1>Arrow-Btn</h1>
                    <div className="form-Arrow-btn">
                        <button className="arr-btn">
                            <span>文字フォントの変更</span>
                        </button>
                        <button className="arr-btn dark">
                            <span>文字フォントの変更</span>
                        </button>
                        <button className="arr-btn act">
                            <span>文字フォントの変更</span>
                        </button>
                        <button className="arr-btn act">
                            <span>文字フォントの変更</span>
                        </button>
                    </div>
                </div>
                <div className="input-wrap">
                    <h1>main-radio</h1>
                    <div className="form-main-radio flx">
                        <div className="d-check-radio">
                            <input type="radio" name="radio01" id="ra01" />
                            <label htmlFor="ra01">物件番号</label>
                        </div>
                        <div className="d-check-radio">
                            <input type="radio" name="radio01" id="ra02" />
                            <label htmlFor="ra02">物件番号</label>
                        </div>
                    </div>
                </div>
            </div>
            <h1 className="title">light</h1>
            <div className="input-content light">
                <div className="input-wrap">
                    <h1>input-wrap</h1>
                    <div className="form-input">
                        <div className="mb5">
                            <span>normal</span>
                            <input type="text" className="input-light" />
                        </div>
                        <div className="mb5">
                            <span>read only</span>
                            <input type="text" className="input-light" readOnly/>
                        </div>
                    </div>
                </div>
                <div className="input-wrap">
                    <h1>select-wrap</h1>
                    <div className="form-input">
                        <div className="mb5">
                            <span>normal</span>
                            <select className="select-light" name="" id="">
                                <option>販売代理店リスト</option>
                                <option>販売代理店リスト</option>
                                <option>販売代理店リスト</option>
                                <option>販売代理店リスト</option>
                                <option>販売代理店リスト</option>
                            </select>
                        </div>
                        <div className="mb5">
                            <span>disabled</span>
                            <select className="select-light" name="" id="" disabled>
                                <option>販売代理店リスト</option>
                                <option>販売代理店リスト</option>
                                <option>販売代理店リスト</option>
                                <option>販売代理店リスト</option>
                                <option>販売代理店リスト</option>
                            </select>
                        </div>
                        <div className="mb5">
                            <span>dark</span>
                            <select className="select-light dark" name="" id="" >
                                <option>販売代理店リスト</option>
                                <option>販売代理店リスト</option>
                                <option>販売代理店リスト</option>
                                <option>販売代理店リスト</option>
                                <option>販売代理店リスト</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div className="input-wrap">
                    <h1>radio-check-wrap</h1>
                    <div className="form-input">
                        <span>radio</span>
                        <div className="flx mb5">
                            <div className="d-check-radio light mr5">
                                <input type="radio" name="radio02" id="ra03" />
                                <label htmlFor="ra03">物件番号</label>
                            </div>
                            <div className="d-check-radio light mr5">
                                <input type="radio" name="radio02" id="ra04" />
                                <label htmlFor="ra04">物件番号</label>
                            </div>
                            <div className="d-check-radio light mr5">
                                <input type="radio" name="radio02" id="ra05" />
                                <label htmlFor="ra05">物件番号</label>
                            </div>
                            <div className="d-check-radio light">
                                <input type="radio" name="radio02" id="ra06" />
                                <label htmlFor="ra06">物件番号</label>
                            </div>
                        </div>
                        <span>check</span>
                        <div className="flx mb5">
                            <div className="d-check-box light mr5">
                                <input type="checkbox" id="ch01" />
                                <label htmlFor="ch01">仕様確認</label>
                            </div>
                            <div className="d-check-box light mr5">
                                <input type="checkbox" id="ch02" />
                                <label htmlFor="ch02">仕様確認</label>
                            </div>
                            <div className="d-check-box light">
                                <input type="checkbox" id="ch03" />
                                <label htmlFor="ch03">仕様確認</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="input-wrap">
                    <h1>date-picker-wrap</h1>
                    <div className="form-input">
                        <div className="mb5">
                            <div className="date-picker">
                                <SingleDatePicker/>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="input-wrap">
                    <h1>button-wrap</h1>
                    <div className="form-input">
                        <div className="mb5">
                            <button className="btn-origin navy mr5">照会</button>
                            <button className="btn-origin grey">初期化</button>
                        </div>
                    </div>
                </div>
            </div>
            <div className="input-content pop">
                <div className="input-wrap">
                <h1>date-picker-wrap</h1>
                    <div className="form-input">
                        <span>check</span>
                        <div className="flx mb5">
                            <div className="d-check-box pop mr5">
                                <input type="checkbox" id="ch05" />
                                <label htmlFor="ch05">仕様確認</label>
                            </div>
                            <div className="d-check-box pop mr5">
                                <input type="checkbox" id="ch06" />
                                <label htmlFor="ch06">仕様確認</label>
                            </div>
                            <div className="d-check-box pop">
                                <input type="checkbox" id="ch07" />
                                <label htmlFor="ch07">仕様確認</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}