import React from 'react'

import Modal from './Modal.jsx'

const MAX_JOB_SIZE = 120
const CONFIRM_REPRINT_MESSAGE = "This photo has already been printed. Print again?"

export default class App extends React.Component {
  constructor(props) {
    super()
    this.state = {
      jobs: [],
      modalVisible: false,
    }
    this.load()
    this.socket = io()
    this.socket.on('job', (job) => this.prepend(job))
  }
  
  load() {
    fetch('/_services/awprint/index')
    .then( res => {
      return res.json()
    }).then( jobs => {
      this.setState({ jobs })
    }).catch( e => {
      console.error(e)
    })
  }
  
  prepend(job) {
    let jobs = this.state.jobs
    if (this.state.jobs.length > MAX_JOB_SIZE) this.state.jobs.pop()
    jobs.unshift(job)
    this.setState({ jobs })
  }
  
  print(job) {
    if (job.printed) {
      var shouldPrint = confirm(CONFIRM_REPRINT_MESSAGE)
      if (! shouldPrint) return
    }
    job.printed = true
    this.setState({ modalVisible: true })

    // first request updates database
    fetch('/_services/awprint/print', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        _id: job._id,
      })
    })
    .then( res => {
      setTimeout( () => {
        this.setState({ modalVisible: false })
      }, 1500)
    })
  /*
    // second request actually prints it?
    fetch('/_services/awprint/print', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        url: job.url,
      })
    })
    .then( res => {
      this.setState({ modalVisible: false })
    })
  */
  }
  render() {
    const jobs = this.state.jobs.map( (job,i) => {
      const className = job.printed ? 'print printed' : 'print'
      const datePartz = job.date.split('T')
      const timePartz = datePartz[1].split(':')
      const hour = Number(timePartz[0])
      const mins = timePartz[1]
      const date = datePartz[0] + ' - ' + hour + ':' + mins
      return (
        <div key={i} className={className} onClick={() => this.print(job)}>
          <img src={job.url} />
          <div className='date'>{date}</div>
        </div>
      )
    })
    return (
      <div>
        {jobs}
        <Modal visible={this.state.modalVisible}>
          <img src='public/spinner.svg' />
          <div>PRINTING YOUR PICTURE</div>
        </Modal>
      </div>
    )
  }
}