const SDSSurvey = () => {
          const [answers, setAnswers] = React.useState({
            item1: null, item2: null, item3: null, item4: null, item5: null,
          });
          const [errors, setErrors] = React.useState({});
          const [results, setResults] = React.useState(null);

          const questions = [
            'I have the feeling that God is distant from me, regardless of my efforts to draw close to him.',
            'I have the feeling that God has abandoned me completely.',
            'I experience times of “spiritual dryness.',
            'I have the feeling that I am "spiritually empty".',
            'I have the feeling that my prayers go unanswered.',
          ];

          const answerOptions = [
            '',
            '1 - Strongly disagree',
            '2 - Disagree',
            '3 - Neutral',
            '4 - Agree',
            '5 - Strongly agree',
          ];

          const handleChange = (event) => {
            const { name, value } = event.target;
            setAnswers({ ...answers, [name]: value === '' ? null : parseInt(value) });
          };

          const handleSubmit = (event) => {
            event.preventDefault();
            let isValid = true;
            const newErrors = {};
            Object.keys(answers).forEach((key) => {
              if (answers[key] === null) {
                newErrors[key] = 'This question is required';
                isValid = false;
              }
            });
            setErrors(newErrors);

            if (isValid) {
              calculateResults();
            }
          };
          const copyToClipboard = () => {
            if (results) {
              const textToCopy = `Spiritual Dryness Result=${results.total}`;
              navigator.clipboard.writeText(textToCopy)
                .catch(err => {
                  console.error('Failed to copy text: ', err);
                });
            }
          };
          const calculateResults = () => {
            let totalScore = 0;
            Object.values(answers).forEach((answer) => {
              totalScore += answer !== null ? answer : 0;
            });

            setResults({ total: totalScore });
          };

          return (
            <div>
 
              <form onSubmit={handleSubmit}>
                {questions.map((question, index) => {
                  const itemName = `item${index + 1}`;
                  return (
                    <div key={itemName} style={{ marginBottom: '15px' }}>
                      <label htmlFor={itemName}>
                        <span className="question-number">{index + 1}.</span> {question}
                      </label>
                      <select
                        id={itemName}
                        name={itemName}
                        value={answers[itemName] === null ? '' : answers[itemName]}
                        onChange={handleChange}
                        style={{ marginLeft: '10px', width: 'calc(100% - 130px)' }}
                      >
                        {answerOptions.map((option, valueIndex) => (
                          <option key={valueIndex} value={valueIndex === 0 ? '' : valueIndex}>{option}</option>
                        ))}
                      </select>
                      {errors[itemName] && <p className="error">{errors[itemName]}</p>}
                    </div>
                  );
                })}
                <button type="submit">Submit</button>
              </form>

              {results && (
                <div className="results">
                  <h3>Results</h3>
                  <p>Spiritual Dryness Score: {results.total}</p>
                  <p><button onClick={copyToClipboard}>Copy Results to Clipboard</button></p>
                </div>
              )}
            </div>
          );
        };

        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<SDSSurvey />);