text: import React, {useState, useRef, useEffect, useCallback} from 'react'
  import PropTypes from 'prop-types'
  import {useHistory} from 'react-router-dom'
  
  import {Modal, NumberInput, Paper, PlusButton, TicketCard} from 'components'
  import {useLoader} from 'components/FadeLoader'
  
  import {useStore} from 'store'
  
  import services from 'services'
  
  import styles from './index.module.scss'
  
  const ModalBody = ({value, onChange, onKeyPress}) => {
    const ref = useRef('')
    const focus = () => ref.current.focus()
  
    useEffect(() => focus(), [])
  
    return (
      <div className={styles.modalBody}>
        <NumberInput ref={ref} label={''} value={value} onChange={onChange} onKeyPress={onKeyPress} />
        {!value && <span className={styles.codeWarning}>Only numbers and cannot be empty.</span>}
      </div>
    )
  }
  
  ModalBody.propTypes = {
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    onChange: PropTypes.func,
    onKeyPress: PropTypes.func,
  }
  
  const TicketList = () => {
    const {showMenu} = useStore()
    const history = useHistory()
  
    const [tickets, setTickets] = useState([])
    const [modalOpen, setModalOpen] = useState(false)
    const [code, setCode] = useState('')
  
    const {withLoader} = useLoader()
  
    useEffect(() => {
      showMenu()
    }, [showMenu])
  
    useEffect(() => {
      const fetchTickets = async () => {
        const result = await withLoader(services.getTickets())
        if (result.success) setTickets(result.data)
      }
      fetchTickets()
    }, [withLoader])
  
    const createNewTicket = useCallback(
      async code => {
        const result = await withLoader(services.createTicketByCode({unique_code: code}))
        if (result.success) history.push(`/ticket/${result.data.id}`)
      },
      [history, withLoader]
    )
  
    const ticketClick = id => history.push(`ticket/${id}`)
  
    const modalConfirm = useCallback(() => {
      if (code && code !== '') {
        createNewTicket(code)
        return setModalOpen(false)
      }
    }, [createNewTicket, setModalOpen, code])
  
    const handleKeyPress = useCallback(
      event => {
        if (event.key === 'Enter') {
          modalConfirm()
        }
      },
      [modalConfirm]
    )
  
    const modalCancel = () => {
      setCode('')
      setModalOpen(false)
    }
  
    return (
      <>
        <header className={styles.header}>
          <h1>Comandas</h1>
        </header>
        <Paper className={styles.paper}>
          {tickets.length ? (
            tickets.map((ticket, index) => (
              <div key={`ticket_${index}`} className={styles.flexCell}>
                <TicketCard ticket={ticket} onClick={() => ticketClick(ticket.id)} />
              </div>
            ))
          ) : (
            <div className={styles.noTickets}>Não há comandas abertas.</div>
          )}
        </Paper>
        <div className={styles.plusButtonContainer}>
          <PlusButton onClick={() => setModalOpen(true)} />
        </div>
  
        <Modal header='Digite um código para a nova comanda.' onConfirm={modalConfirm} onCancel={modalCancel} open={modalOpen}>
          <ModalBody value={code} onChange={value => setCode(value)} onKeyPress={handleKeyPress} />
        </Modal>
      </>
    )
  }
  
  export default TicketList
  