import { style } from "d3";
import React, { useState } from "react";

import Button from "./Button.jsx";

const CATEGORY_LIST = [
  { id: 0, data: "서울" },
  { id: 1, data: "인천" },
  { id: 2, data: "경기" },
  { id: 3, data: "경북" },
  { id: 4, data: "경남" },
  { id: 5, data: "전북" },
  { id: 6, data: "전남" },
  { id: 7, data: "제주" },
];
const CATEGORY_LIST1 = [
  { id: 0, data: "전체" },
  { id: 0, data: "광현리" },
  { id: 1, data: "금구리" },
  { id: 2, data: "내량리" },
  { id: 3, data: "대북리" },
  { id: 4, data: "대흥리" },
  { id: 5, data: "동부리" },
  { id: 6, data: "무성리" },
  { id: 7, data: "사직리" },
  { id: 8, data: "삽령리" },
  { id: 9, data: "상곡리" },
  { id: 10, data: "서부리" },
  { id: 11, data: "수서리" },
  { id: 12, data: "오곡리" },
  { id: 13, data: "외량리" },
  { id: 14, data: "용대리" },
  { id: 15, data: "정리" },
  { id: 15, data: "하곡리" },
];
const CATEGORY_LIST2 = [
  { id: 0, data: "전체" },
  { id: 0, data: "사리리" },
  { id: 1, data: "보현리" },
  { id: 2, data: "복성리" },
  { id: 3, data: "위성리" },
  { id: 4, data: "달산리" },
  { id: 5, data: "송원리" },
  { id: 6, data: "신계리" },
  { id: 7, data: "도산리" },
  { id: 8, data: "서경리" },
  { id: 9, data: "평호리" },
  { id: 10, data: "산법리" },
  { id: 11, data: "내의리" },
  { id: 12, data: "봉황리" },
  { id: 13, data: "봉소리" },
];
const CATEGORY_LIST3 = [
  { id: 0, data: "전체" },
  { id: 0, data: "노행리" },
  { id: 1, data: "오천리" },
  { id: 2, data: "성리" },
  { id: 3, data: "병수리" },
  { id: 4, data: "불로리" },
  { id: 5, data: "내리리" },
  { id: 6, data: "중구리" },
  { id: 7, data: "거매리" },
  { id: 8, data: "장군리" },
  { id: 9, data: "장기리" },
  { id: 10, data: "금매리" },
  { id: 11, data: "화계리" },
  { id: 12, data: "마시리" },
  { id: 13, data: "매곡리" },
  { id: 14, data: "고곡리" },
];
const CATEGORY_LIST4 = [
  { id: 0, data: "전체" },
  { id: 0, data: "창평리" },
  { id: 1, data: "가호리" },
  { id: 2, data: "춘산리" },
  { id: 3, data: "대율리" },
  { id: 4, data: "동산리" },
  { id: 5, data: "남산리" },
  { id: 6, data: "명산리" },
  { id: 7, data: "신화리" },
];

const CATEGORY_LIST5 = [
  { id: 0, data: "전체" },
  { id: 0, data: "나호리" },
  { id: 1, data: "이화리" },
  { id: 2, data: "두북리" },
  { id: 3, data: "선곡리" },
  { id: 4, data: "미성리" },
  { id: 5, data: "모산리" },
  { id: 6, data: "문덕리" },
  { id: 7, data: "달산리" },
  { id: 8, data: "봉산리" },
];

const CATEGORY_LIST6 = [
  { id: 0, data: "전체" },
  { id: 0, data: "읍내리" },
  { id: 1, data: "수북리" },
  { id: 2, data: "수서리" },
  { id: 3, data: "이지리" },
  { id: 4, data: "파전리" },
  { id: 5, data: "신덕리" },
  { id: 6, data: "지호리" },
  { id: 7, data: "연계리" },
  { id: 8, data: "매성리" },
  { id: 9, data: "원산리" },
  { id: 10, data: "금양리" },
];
const CATEGORY_LIST7 = [
  { id: 0, data: "전체" },
  { id: 0, data: "백학리" },
  { id: 1, data: "삼산리" },
  { id: 2, data: "봉림리" },
  { id: 3, data: "무암리" },
  { id: 4, data: "운산리" },
  { id: 5, data: "화본리" },
  { id: 6, data: "화전리" },
];

const CATEGORY_LIST8 = [
  { id: 0, data: "전체" },
  { id: 0, data: "화수리" },
  { id: 1, data: "화북리" },
  { id: 2, data: "괴산리" },
  { id: 3, data: "학성리" },
  { id: 4, data: "장곡리" },
  { id: 5, data: "인곡리" },
  { id: 6, data: "양지리" },
  { id: 7, data: "낙전리" },
  { id: 8, data: "가암리" },
  { id: 9, data: "석산리" },
  { id: 10, data: "학암리" },
];

const locations = [
  {
    id: "no1",
    label: "군위읍",
    list: CATEGORY_LIST1,
  },
  {
    id: "no2",
    label: "소보면",
    list: CATEGORY_LIST2,
  },
];

export default function DetailSearch({}) {
  const [checkedList, setCheckedList] = useState([]);
  const [selectArea, setSelectArea] = React.useState();

  const onCheckedElement = (checked, item) => {
    if (checked) {
      setCheckedList([...checkedList, item]);
    } else if (!checked) {
      setCheckedList(checkedList.filter((el) => el !== item));
    }
  };

  const onRemove = (item) => {
    setCheckedList(checkedList.filter((el) => el !== item));
  };

  const categories = locations.map((location) => (
    <li>
      <label htmlFor={location.id}>{location.label}</label>
      <input type="radio" name="location" id={location.id} />
      <div className="area-list flex">
        <ul className="flex">
          {location.list.map((item) => (
            <li className="flex-start">
              <input
                type="checkbox"
                className="checkCon"
                id={item.id}
                value={item.data}
                onChange={(e) => {
                  onCheckedElement(e.target.checked, e.target.value);
                }}
                checked={checkedList.includes(item.data) ? true : false}
              />
              <label htmlFor={item.id}>{item.data}</label>
            </li>
          ))}
        </ul>
      </div>
    </li>
  ));

  return (
    <div className="search-group">
      <div className="search-area flex" style={{ width:"50%"}}>
        <div className="detail-search" style={{ width:"85%"}}>
          <table>
            <tbody>
              <tr>
                <th>기관명 검색</th>
                <td colSpan={3}>
                  <div className="flex">
                    <select name="" id="">
                      <option value="">전체</option>
                      <option value="">복지관1</option>
                      <option value="">복지관2</option>
                      <option value="">병원1</option>
                      <option value="">병원2</option>
                    </select>
                    <input type="text" />
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="btn-box flex-center"  style={{ width:"15%"}}>
              <Button className={"btn-small gray-btn"} btnName={"조회"} />
            </div>
      </div>
    </div>
  );
}