import { useState } from 'react';
import styles from '../styles/Calculator.module.scss'

const App = () => {
  const [display, setDisplay] = useState('0')
  const [memory, setMemory] = useState([])
  const [result, setResult] = useState([])

  const onClear = () => {
    setDisplay('0')
    setMemory([])
  }
  const onNumber = n => setDisplay(p => display === '0' ? n.toString() : p+n)
  const onMath = m => {
    if (display !== '0') {
      if (!result) {
        setMemory(p => [
          ...p,
          { type: 'n', value: display },
          { type: 'm', value: m },
        ]);
      } else {
        setResult(false)
        setMemory([
          { type: 'n', value: display },
          { type: 'm', value: m },
        ]);
      }
      setDisplay('0')
    } else if (memory[memory.length - 1].type === 'm') {
      setMemory(p => [...p.slice(0, -1), { type: 'm', value: m }]);
    }
  }

  const newVal = (prevVal, curVal) => {
    if (!prevVal || !prevVal.m) return 0;

    if (prevVal.m === '+') {
      return `${Number(prevVal.value) + Number(curVal.value)}`
    }
    if (prevVal.m === '-') {
      return `${Number(prevVal.value) - Number(curVal.value)}`
    }
    if (prevVal.m === '*') {
      return `${Number(prevVal.value) * Number(curVal.value)}`
    }
    if (prevVal.m === '/') {
      return prevVal.value !== '0' && curVal.value !== '0'
        ? `${Number(prevVal.value) / Number(curVal.value)}`
        : '0'
    }
  }

  const onResult = () => {
    if (memory.length > 2 || (memory.length > 1 && display !== '0')) {
      const actions = display === 0
        ? memory
        : [...memory, { type: 'n', value: display }]
      const result = actions.reduce((prevVal, curVal) => {
        return curVal.type === 'n'
          ? ({ value: newVal(prevVal, curVal), m: null })
          : ({ value: prevVal.value, m: curVal.value })
      })
      setDisplay(result?.value || 0);
      setResult(true)
      if (display !== 0) {
        setMemory(p => [...p, { type: 'n', value: display }])
      }
    }
  }

  return (
    <>
      <div className='window__submenu'>
        <div>
          <div onClick={onClear}>
            Clear
          </div>
        </div>
      </div>
      <div className={styles.calculator}>
        <div className={styles.display}>
          <div>
            { memory.map(o => o.value).join(' ') }
          </div>
          <div>
            {display}
          </div>
        </div>
        <div className={styles.keys}>
          <div>
            { [...Array(10).keys()].map(k => (
              <div key={k} onClick={() => onNumber(k)}>{k}</div>
            )) }
            <div onClick={() => setDisplay(p => p+'.')}>.</div>
            <div onClick={onResult}>=</div>
          </div>
          <div>
            {['+','-','*','/'].map(m => (
              <div key={m} onClick={() => onMath(m)}>{m}</div>
            ))}
          </div>
        </div>
      </div>
    </>
  )
}

export default App