'use client'
import { useState } from "react"
import RoofComplianceNoSearch from "./nosearch/RoofComplianceNoSearch";
import RoofComplianceCheckData from "./RoofComplianceCheckData";
import Image from "next/image";

export default function RoofCompliance(){
  const [reference, setReference] = useState(false);
    const [searchValue, setSearchValue] = useState(''); //search 데이터 유무

  //search 데이터 value 추가
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { 
    setSearchValue(e.target.value);
  };
  
  return(
    <div className="border-frame">
      <div className="sale-form-bx">
        <select className="select-form" name="" id="">
          <option value="">屋根材を選択してください.</option>
          <option value="">屋根材を選択してください.</option>
          <option value="">屋根材を選択してください.</option>
          <option value="">屋根材を選択してください.</option>
          <option value="">屋根材を選択してください.</option>
        </select>
      </div>
      <div className="sale-form-bx">
        <div className="search-input">
          <input type="text" className="search-frame" value={searchValue} onChange={handleChange} placeholder="Search"/>
          {/*input에 데이터 있으면 삭제버튼 보임 */}
          {searchValue && <button className="del-icon" onClick={() => setSearchValue('')}></button>}
          <button className="search-icon"></button>
        </div>
      </div>
      <div className="compliance-check-wrap">
        <div className={`compliance-check-bx ${reference ? 'act' : ''}`}>
          <div className="check-name-wrap">
            <div className="check-name">凡例</div>
            <div className="check-name-btn">
              <button className="bx-btn" onClick={() => setReference(!reference)}></button>
            </div>
          </div>
          <ul className= "reference-list">
            <li className="reference-item">
              <div className="reference-item-bx">
                <div className="compliance-icon">
                  <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
                </div>
                <span>設置可能</span>
              </div>
            </li>
            <li className="reference-item">
              <div className="reference-item-bx">
                <div className="compliance-icon">
                  <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
                </div>
                <span>設置不可</span>
              </div>
            </li>
            <li className="reference-item">
              <div className="reference-item-bx"> 
                <div className="compliance-icon">
                  <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
                </div>
                <span>お問い合わせ</span>
              </div>
            </li>
            <li className="reference-item">
              <div className="reference-item-bx">
                <div className="compliance-icon">
                  <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
                </div>
                <span>備考</span>
              </div>
            </li>
          </ul>
        </div>
        {/* checkData */}
        <RoofComplianceCheckData/>
        <RoofComplianceCheckData/>
        <RoofComplianceCheckData/>
        <RoofComplianceCheckData/>
        <div className="float-btn-wrap">
          <div className="btn-flex-wrap com">
            <div className="btn-bx">
              <button className="btn-frame n-blue icon">全選択<i className="btn-arr"></i></button>
            </div>
            <div className="btn-bx">
              <button className="btn-frame red icon">詳細を見る<i className="btn-arr"></i></button>
            </div>
            <div className="btn-bx">
              <button className="btn-frame n-blue icon">選択ダウンロード<i className="btn-arr"></i></button>
            </div>
          </div>
        </div>
      </div>
      {/* 검색기록 없을떄 */}
      {/* <RoofComplianceNoSearch/> */}
    </div>
  )
}