import _ from 'lodash';

// @ts-ignore
import witch from '../../resources/witch.svg';
import './GamePage.css';
import { Witch } from '../../model/Witch';
import apiStore from '../../store/apiStore/apiStore';
import { useState } from 'react';

type GameProps = {
  onExitGame: () => void,
};

const GamePage: React.FC<GameProps> = (props) => {
  const {onExitGame} = props;
  const [state, setState] = useState(0);

  const clickAtWitch = (guid: string) => {
    apiStore.turn(guid)
      .then((result) => {
        setState(result ? 1 : 2);
        setTimeout(() => {
          setState(0);
        }, 300);
      });
  };
  return (
    <header className="App-header">
      <div className='game'>
        <div>Score: {apiStore.currentGame?.score}</div>
        <div className={`witch-row state${state}`}>
          {
            _.map(apiStore.currentGame?.witches, (item: Witch, index: number) => {
              const left = item.position * 100;
              const top = 100;
              return (
                <div key={index} className='witch' style={{left, top}}>
                  <img src={witch} alt={`witch-${index}`} onClick={() => clickAtWitch(item.guid)}/>
                </div>
              )
            })
          }
        </div>
        <div className="small">Version: {apiStore.version}</div>
      </div>
      <h1 onClick={() => onExitGame()}> Стоп игра! </h1>
      <div>
        <label htmlFor='hasServer'>У меня, кажется, есть свой сервер!</label>
        <input
          type='checkbox'
          id='hasServer'
          checked={!apiStore.mockMode}
          value='1'
          onChange={(e) => apiStore.tryToSetMockMode(e.target.checked)}
        /></div>
    </header>
  );
}

export default GamePage;