/** @jsx h */
const { h, render} = composi
const { DataStore } = datastore


const DigitKeys = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0]

const CalculatorOperations = [
  {
    key: '/',
    name: 'divide',
    symbol: '÷',
    func: (prevValue, nextValue) => prevValue / nextValue
  },
  {
    key: '*',
    name: 'multiply',
    symbol: '×',
    func: (prevValue, nextValue) => prevValue * nextValue
  },
  {
    key: '-',
    name: 'subtract',
    symbol: '−',
    func: (prevValue, nextValue) => prevValue - nextValue
  },
  {
    key: '+',
    name: 'add',
    symbol: '+',
    func: (prevValue, nextValue) => prevValue + nextValue
  },
  {
    key: '=',
    name: 'equals',
    symbol: '=',
    func: (prevValue, nextValue) => nextValue
  }
]

const getFormattedValue = value => {
  const language = navigator.language || 'en-US'

  let formattedValue = parseFloat(value).toLocaleString(language, {
    useGrouping: true,
    maximumFractionDigits: 6
  })

  const match = value.match(/\.\d*?(0*)$/)

  if (match) { formattedValue += (/[1-9]/).test(match[0]) ? match[1] : match[0] }

  return formattedValue.length >= 14 ? String(parseFloat(value).toExponential()) : formattedValue
}

function CalculatorKey({ onClick, className, keyValue }) {
  return (
    <button onclick={onClick} class={`calculator-key ${className}`}>{keyValue}</button>
  )
}

function CalculatorDisplay({ value }) {
  return (
    <div class="calculator-display">
      {getFormattedValue(value)}
    </div>
  )
}

const dataStore = new DataStore({
    value: null,
    displayValue: '0',
    operator: null,
    scale: 1,
    waitingForOperand: false
  })
window.dataStore = dataStore

dataStore.watch('update-display', data => {
  render(<Calculator data={dataStore.state} />, '.calculator')
})

function Calculator({ data }) {
  const { displayValue } = dataStore.state
  const CLEARDISPLAY = displayValue !== '0'
  const clearText = CLEARDISPLAY ? 'C' : 'AC'

  const init = el => {
    el.addEventListener('keydown', handleKeyDown)
  }
  const clearAll = () => {
    dataStore.setState({
      value: null,
      displayValue: '0',
      operator: null,
      waitingForOperand: false
    })
  }
  const clearDisplay = () => {
    dataStore.setState({
      displayValue: '0'
    })
  }
  const clearLastChar = () => {
    const { displayValue } = dataStore.state

    dataStore.setState({
      displayValue: displayValue.substring(0, displayValue.length - 1) || '0'
    })
  }
  const toggleSign = () => {
    const { displayValue } = dataStore.state
    const newValue = parseFloat(displayValue) * -1

    dataStore.setState({
      displayValue: String(newValue)
    })
  }
  const inputPercent = () => {
    const { displayValue } = dataStore.state
    const currentValue = parseFloat(displayValue)

    if (currentValue === 0) { return }

    const fixedDigits = displayValue.replace(/^-?\d*\.?/, '')
    const newValue = parseFloat(displayValue) / 100

    dataStore.setState({
      displayValue: String(newValue.toFixed(fixedDigits.length + 2))
    })
  }
  const performOperation = nextOperator => {
    const { value, displayValue, operator } = dataStore.state
    const inputValue = parseFloat(displayValue)

    if (value == null) {
      dataStore.setState({
        value: inputValue
      })
    } else if (operator) {
      const currentValue = value || 0
      const operation = CalculatorOperations.find(item => operator == item.key)
      const newValue = operation.func(currentValue, inputValue)

      dataStore.setState({
        value: newValue,
        displayValue: String(newValue)
      })
    }

    dataStore.setState(prevState => {
      prevState.waitingForOperand = true
      prevState.operator = nextOperator
      return prevState
    })
  }
  const inputDigit = digit => {
    const { displayValue, waitingForOperand } = dataStore.state

    if (waitingForOperand) {
      dataStore.setState(prevState => {
        prevState.displayValue = String(digit)
        prevState.waitingForOperand = false
        return prevState
      })
    } else {
      dataStore.setState(prevState => {
        prevState.displayValue = displayValue === '0' ? String(digit) : displayValue + digit
        return prevState
      })
    }
  }
  const inputDot = () => {
    const { displayValue, waitingForOperand } = dataStore.state
    if (waitingForOperand) {
      dataStore.setState({
        displayValue: '0.',
        waitingForOperand: false
      })
    } else if (!(/\./).test(displayValue)) {
      dataStore.setState(prevState => {
        prevState.displayValue = displayValue + '.'
        prevState.waitingForOperand = false
        return prevState
      })
    }
  }
  const handleKeyDown = event => {
    let { key } = event

    if (key === 'Enter') { key = '=' }

    if ((/\d/).test(key)) {
      event.preventDefault()
      inputDigit(parseInt(key, 10))
    } else if (key in CalculatorOperations) {
      event.preventDefault()
      performOperation(key)
    } else if (key === '.') {
      event.preventDefault()
      inputDot()
    } else if (key === '%') {
      event.preventDefault()
      inputPercent()
    } else if (key === 'Backspace') {
      event.preventDefault()
      clearLastChar()
    } else if (key === 'Clear') {
      event.preventDefault()

      if (dataStore.state.displayValue !== '0') {
        clearDisplay()
      } else {
        clearAll()
      }
    }
  }
  return (
    <div class="calculator">
      <CalculatorDisplay value={displayValue} />
      <div class="calculator-keypad">
        <div class="input-keys">
          <div class="function-keys">
            <CalculatorKey
              className="key-clear"
              onClick={() => CLEARDISPLAY ? clearDisplay() : clearAll()}
              keyValue={clearText}
            >
            </CalculatorKey>
            <CalculatorKey
              className="key-sign"
              onClick={toggleSign}
              keyValue='±'>
            </CalculatorKey>
            <CalculatorKey
              className="key-percent"
              onClick={inputPercent}
              keyValue='%'
            >
            </CalculatorKey>
          </div>
          <div className="digit-keys">
            {
              DigitKeys.map(el =>
                <CalculatorKey
                  key={`key-${el}`}
                  className={`key-${el}`}
                  onClick={() => inputDigit(el)}
                  keyValue={el}
                >
                </CalculatorKey>
              )
            }
            <CalculatorKey
              className="key-dot"
              onClick={inputDot}
              keyValue='●'
            >
            </CalculatorKey>
          </div>
        </div>
        <div className="operator-keys">
          {
            CalculatorOperations.map(item => (
              <CalculatorKey
                key={item.name}
                className={`key-${item.name}`}
                onClick={() => performOperation(item.key)}
                keyValue={item.symbol}
              >
              </CalculatorKey>
            ))
          }
        </div>
      </div>
    </div>
  )
}

render(<Calculator data={dataStore.state}/>, '.calculator')