import React, {ChangeEvent, useCallback, useMemo, useState} from 'react';
import './App.css';
import {Col, Container, Form, InputGroup, Row,} from "react-bootstrap";
import {Character, CharacterStatus, SPType} from "./CharacterStatus";

function App() {
  const [maxHp, _setMaxHp] = useState(1)
  const [hp, _setHp] = useState(1)
  const setHp = useCallback(function (v: number) {
    v = Math.floor(v)
    if (Number.isNaN(v) || v < 0 || v > maxHp || v === hp) {
      return
    }
    _setHp(v)
  }, [hp, maxHp])
  const setHpMax = useCallback(function (v: number) {
    v = Math.floor(v)
    if (Number.isNaN(v) || v < 0 || v > 9999 || v === maxHp) {
      return
    }
    if (v < hp) {
      setHp(v)
    }
    _setMaxHp(v)
  }, [hp, maxHp, setHp])
  const onHpChange = useCallback(
      (e: ChangeEvent<HTMLInputElement>) => setHp(parseInt(e.target.value)), [setHp])
  const onMaxHpChange = useCallback(
      (e: ChangeEvent<HTMLInputElement>) => setHpMax(parseInt(e.target.value)), [setHpMax])
  const [maxMp, _setMaxMp] = useState(6)
  const [mp, _setMp] = useState(6)
  const setMp = useCallback(function (v: number) {
    v = Math.floor(v)
    if (Number.isNaN(v) || v < 0 || v > maxMp || v === mp) {
      return
    }
    _setMp(v)
  }, [mp, maxMp])
  const setMpMax = useCallback(function (v: number) {
    v = Math.floor(v)
    if (Number.isNaN(v) || v < 0 || v > 9999 || v === maxMp) {
      return
    }
    if (v < mp) {
      setMp(v)
    }
    _setMaxMp(v)
  }, [mp, maxMp, setMp])
  const onMpChange = useCallback(
      (e: ChangeEvent<HTMLInputElement>) => setMp(parseInt(e.target.value)), [setMp])
  const onMaxMpChange = useCallback(
      (e: ChangeEvent<HTMLInputElement>) => setMpMax(parseInt(e.target.value)), [setMpMax])

  const character = useMemo<Character>(() => ({
    name: "Test",
    level: 50,
    hp: 40,
    maxHp: 50,
    mp: 40,
    maxMp: 50,
    ip: mp,
    maxIp: maxMp,
    sp: 1,
    spType: SPType.UltimaPoints,
    turnsLeft: hp,
    turnsTotal: maxHp,
  }), [hp, maxHp, mp, maxMp])
  return (
      <Container fluid>
        <Row>
          <Col>
            <InputGroup>
              <InputGroup.Text>Max HP</InputGroup.Text>
              <Form.Control type="numeric" max="9999" min="0" step="1" value={maxHp} onChange={onMaxHpChange} />
            </InputGroup>
          </Col>
          <Col>
            <InputGroup>
              <InputGroup.Text>Current HP</InputGroup.Text>
              <Form.Control type="numeric" max={maxHp} min="0" step="1" value={hp} onChange={onHpChange} />
            </InputGroup>
          </Col>
        </Row>
        <Row>
          <Col>
            <InputGroup>
              <InputGroup.Text>Max MP</InputGroup.Text>
              <Form.Control type="numeric" max="9999" min="0" step="1" value={maxMp} onChange={onMaxMpChange} />
            </InputGroup>
          </Col>
          <Col>
            <InputGroup>
              <InputGroup.Text>Current MP</InputGroup.Text>
              <Form.Control type="numeric" max={maxMp} min="0" step="1" value={mp} onChange={onMpChange} />
            </InputGroup>
          </Col>
        </Row>
        <Row>
          <CharacterStatus character={character} />
        </Row>
      </Container>
  );
}

export default App;