import * as React from "react";
import { options } from "./options";

export const Questionaire = ({ question }: { question: string }) => {
  const [val, setVal] = React.useState(options[0].value);
  const [text, setText] = React.useState("");
  const getAnswer = () => (val === "" ? text : val);
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
    setVal(e.target.value);
  const onTextChanged = (e: React.ChangeEvent<HTMLInputElement>) =>
    setText(e.target.value);
  return (
    <>
      <p>{question}</p>
      <p>
        {options.map((option) => (
          <label>
            <input
              type="radio"
              value={option.value}
              checked={val === option.value}
              onChange={handleChange}
            />
            {option.label}
          </label>
        ))}
      </p>
      <p hidden={val !== ""}>
        <label>
          自由回答欄:<span> </span>
          <input type="text" value={text} onChange={onTextChanged} />
        </label>
      </p>
      <hr />
      <p>
        回答: <span>{getAnswer()}</span>
      </p>
    </>
  );
};