import React, { useState, useRef } from "react";

const Script = () => {
  const optionListRef = useRef(null);

  const [ValueList, setValueList] = useState([
    "id",
    "name",
    "sex",
    "height",
    "weight",
  ]);

  // 해당 컴포넌트에서 선택된 특정한 스크립트의 타입을 여기 넣습니다.
  const [selectedValues, setSelectedValues] = useState([]);
  const [analysisVariables, setAnalysisVariables] = useState("");

  // 각 옵션을 렌더링하는 데 사용되는 컴포넌트
  const [isFocused, setIsFocused] = useState(false);

  const Option = ({ value, isSelected, onClick }) => {
    return (
      <div
        className={`option ${isSelected ? "select" : ""}`}
        onClick={() => onClick(value)}
        style={{
          cursor: "pointer",
          padding: "5px 10px",

          margin: "2px",
        }}
      >
        {value}
      </div>
    );
  };

  const handleFocus = () => {
    setIsFocused(true);
    optionListRef.current.style.height = "500px"; // 포커스 상태에서의 높이
  };

  const handleBlur = () => {
    setIsFocused(false);
    optionListRef.current.style.height = "100px"; // 블러 상태에서의 기본 높이
  };

  // 옵션 선택/해제 처리 함수
  const handleOptionClick = (value) => {
    const currentIndex = selectedValues.indexOf(value);
    const newSelectedValues = [...selectedValues];

    if (currentIndex === -1) {
      newSelectedValues.push(value); // 선택되지 않은 옵션이면 추가
    } else {
      newSelectedValues.splice(currentIndex, 1); // 이미 선택된 옵션이면 제거
    }

    setSelectedValues(newSelectedValues);
    setAnalysisVariables(newSelectedValues.join(",")); // 선택된 값들을 콤마로 구분된 문자열로 업데이트
  };

  //코드 추가
  const tableName = "character_info"; // 내 DB 테이블 이름을 지정

  const [results, setResults] = useState({}); // DB에서 가져온 결과를 저장할 공간

  const runAnalysis = async () => {
    // 입력 검증
    if (!analysisVariables) {
      alert("분석을 위한 변수가 입력되지 않았습니다!");
      return;
    }

    try {
      const response = await fetch("your api", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          table_name: tableName,
          analysisVariables: analysisVariables,
        }),
      });

      if (!response.ok) {
        // 오류가 있는 경우 사용자에게 알립니다.
        alert(`연속형 변수만을 선택하세요.: ${response.status}`);
        return;
      }

      const data = await response.json();
      setResults(data); // 결과 상태 업데이트
    } catch (error) {
      alert(`연속형 변수만을 선택하세요.: ${error.message}`);
    }
  };

  return (
    <>
      <div
        className="monitor"
        style={{ display: "flex", flexDirection: "column" }}
      >
        <div className="three-value-area">
          <div
            className="input-text-3"
            ref={optionListRef}
            tabIndex={0}
            onFocus={handleFocus}
            onBlur={handleBlur}
          >
            {ValueList.map((value, index) => (
              <Option
                key={index}
                value={value}
                isSelected={selectedValues.includes(value)}
                onClick={handleOptionClick}
              />
            ))}
          </div>

          <button className="run-btn" onClick={runAnalysis}>
            Run Script
          </button>

          <table className="statistics-table">
            <thead>
              <tr>
                <th>Variable</th>
                <th>W Statistic</th>
                <th>P-value</th>
              </tr>
            </thead>
            <tbody>
              {Object.entries(results).map(([variableName, stats], index) => (
                <tr key={index}>
                  <td>{variableName}</td>
                  <td>
                    {stats.W && stats.W.length > 0
                      ? stats.W[0].toFixed(3)
                      : "N/A"}
                  </td>
                  <td>
                    {stats.P_Value && stats.P_Value.length > 0
                      ? stats.P_Value[0].toFixed(3)
                      : "N/A"}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
};

export default Script;