const useState = React.useState;

function App() {
  const [input, setInput] = useState('0');
  const [result, setResult] = useState(0);
  
 const handleButtonClick = (value) => {
  setInput((prevInput) => {
    if (isOperator(prevInput[prevInput.length - 1]) && isOperator(value)) {
      // 直前の入力が演算子であり、新しい入力も演算子の場合は何もしない
      return prevInput;
    } else if (prevInput === '0' && !isOperator(value)) {
      // '0'の場合かつvalueが演算子でない場合
      return value;
    } else {
      return prevInput + value;
    }
  });
};


  const handleBackspace = () => {
    setInput((prevInput) => prevInput.slice(0, prevInput.length - 1));
  };

  const handleClear = () => {
    setResult(0);
    setInput('0');
  };

  const handleCalculate = () => {
    try {
      const calculatedResult = evaluateExpression(input);
      setInput(calculatedResult.toString());
      setResult(calculatedResult);
    } catch (error) {
      setInput('エラー：' + error.message);
      setResult('エラー');
    }
  };

  const handleDecimalClick = () => {
    setInput((prevInput) => (prevInput.includes('.') ? prevInput : prevInput + '.'));
  };
  
const handleOperatorClick = (operator) => {
  if (!isOperator(input[input.length - 1])) {
    setInput((prevInput) => prevInput + operator);
  }
};

  const evaluateExpression = (expression) => {
    const sanitizedExpression = expression.replace(/[^-()\d/*+.]/g, '');
    const result = Function(`"use strict";return (${sanitizedExpression})`)();
    return Number.isInteger(result) ? result : result.toFixed(2);
  };

  // 演算子を含むかどうかを判定する関数
  const isOperator = (value) => {
    return ['+', '-', '*', '=', 'C', '.'].includes(value);
  };

  const buttonConfig = [
    ['1', '2', '3', '+'],
    ['4', '5', '6', '-'],
    ['7', '8', '9', '*'],
    ['0', 'C', '.', '='], 
  ];

  return (
    <div className="container">
      <div className="calculator">
        <h1>計算機</h1>
        <div className="input-container">
          <input type="text" value={input} readOnly />
          <button className="backspace-button" onClick={handleBackspace}>
            &#9003;
          </button>
        </div>
        {buttonConfig.map((row, rowIndex) => (
  <div key={rowIndex}>
    {row.map((value) => (
      <button
        key={value}
        className={`calculator-button ${value === 'C' ? 'clear-button' : ''} ${isOperator(value) ? 'operator' : ''}`}
        onClick={() =>
          value === 'C'
            ? handleClear()
            : value === '='
            ? handleCalculate()
            : value === '.'
            ? handleDecimalClick()
            : handleButtonClick(value)
        }
      >
        {value}
      </button>
    ))}
  </div>
))}

        <div>
          <p>結果: {result}</p>
        </div>
      </div>
    </div>
  );
}
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<App />);