import React from 'react'
import Menu from './Menu'
import Tr, { translate } from '../../../utils/language'
import DownloadHandler from '../../../utils/download'

import './Game.css'
import DirInput from '../common/DirInput'
import BigButton from '../common/BigButton'
import HelpButton from '../common/HelpButton'
import { unzip } from '../../../utils/zipUtils'

const GAME_DOWNLOAD = ''

interface IProps {
  closeFn: () => void;
  downloadManager: DownloadHandler;
}

interface IState {
  gameDownloading: boolean;
  gameDownloadFolder: string;
  dirPlaceholder: string;
}

export default class Downloads extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props)

    this.state = {
      gameDownloading: false,
      gameDownloadFolder: '',
      dirPlaceholder: ''
    }

    this.downloadGame = this.downloadGame.bind(this)
  }

  async componentDidMount() {
    this.setState({
      dirPlaceholder: await translate('components.select_folder')
    })

    console.log(this.state)
  }

  async downloadGame() {
    const folder = this.state.gameDownloadFolder
    this.props.downloadManager.addDownload(GAME_DOWNLOAD, folder + '\\game.zip', () =>{
      unzip(folder + '\\game.zip', folder + '\\', () => {
        this.setState({
          gameDownloading: false
        })
      })
    })

    this.setState({
      gameDownloading: true
    })
  }

  render() {
    return (
      <Menu heading='Download Game' closeFn={this.props.closeFn} className="GameDownloadMenu">
        <div className="GameDownload">
          {
            this.state.gameDownloadFolder !== '' && !this.state.gameDownloading ?
              <BigButton id="downloadGameBtn" onClick={this.downloadGame}>Download Game</BigButton>
              : <BigButton id="disabledGameBtn" onClick={() => null} disabled>Download Game</BigButton>
          }
          <HelpButton>
            <Tr text="main.game_help_text" />
          </HelpButton>
        </div>
        
        <div className="GameDownloadDir">
          <DirInput folder placeholder={this.state.dirPlaceholder} clearable={false} readonly={true} onChange={(value: string) => this.setState({
            gameDownloadFolder: value
          })}/>
        </div>
      </Menu>
    )
  }
}