content: import React from 'react'
  import urls from 'urls'
  import { connect } from 'react-redux'
  import { Button, Row, Col, Modal } from 'antd'
  import { fetch } from 'reducers/Fetch/actions'
  import { post } from 'reducers/Post/actions'
  import { put } from 'reducers/Put/actions'
  import { deleteRequest } from 'reducers/Delete/actions'
  import EventForm from 'components/EventForm'
  import { EVENTS_ADMIN_KEY } from './constants'
  const confirm = Modal.confirm
  
  class EventsAdmin extends React.PureComponent {
    static propTypes = {
      events: React.PropTypes.array,
    };
  
    state = {
      showModal: false,
      modalTitle: '',
      event: {},
    }
  
    componentDidMount() {
      const { params } = this.props
      const apiUrl = params.filter ? `${urls.eventsAdmin.api}/${params.filter}` : urls.eventsAdmin.api
      this.props.fetch(EVENTS_ADMIN_KEY, apiUrl, urls.eventsAdmin.reducerName)
    }
  
    bindDeleteEvent = (eventId) => {
      const { deleteEvent } = this.props
      return () => {
        confirm({
          title: 'Tem certeza que quer deletar este evento?',
          content: 'Titulo do evento a ser deletado',
          okText: 'Deletar',
          cancelText: 'Cancelar',
          onOk() { deleteEvent(eventId) },
          onCancel() {},
        })
      }
    }
  
    newEvent = () => {
      this.setState({
        showModal: true,
        modalTitle: 'Novo Evento',
        event: {},
      })
    }
  
    bindEditEvent = (event) => {
      return () => {
        this.setState({
          showModal: true,
          modalTitle: 'Editar Evento',
          event,
        })
      }
    }
  
    handleSave = () => {
      const { event } = this.state
      const form = this.form
  
      form.validateFields((err, values) => {
        if (err) {
          return
        }
  
        if (event.id) {
          this.props.putEvent(values, event.id)
        } else {
          this.props.postEvent(values)
        }
  
        console.log('Received values of form: ', values)
        form.resetFields()
        this.setState({ showModal: false })
      })
    }
  
    saveFormRef = (form) => {
      this.form = form
    }
  
    handleCancel = (e) => {
      this.setState({
        showModal: false,
      })
    }
  
    renderPictureList(pictures) {
      if (!pictures) {
        return null
      }
  
  
      return pictures.map((picture) => {
        return (
          <div key={picture.id}>
            <img src={picture.url} role="presentation" width="200" />
          </div>
        )
      })
    }
  
    renderEventList() {
      const { events, params, eventsRequestError } = this.props
  
      if (events.length === 0 && eventsRequestError) { // TODO: certificar-se do erro -> fazer componente para tratar erros?
        return <h2> Filtro '{params.filter}' não encontrado :( </h2> /* TODO: remove hardcoded string */
      } else if (events.length === 0 && eventsRequestError === null) {
        return <h2> Não há eventos ainda... </h2> /* TODO: remove hardcoded string */
      }
  
      return events.map((event) => {
        const pictureList = this.renderPictureList(event.pictures)
        return (
          <div key={event.id} >
            <Row gutter={16}>
              <Col span={24}>
                <Button onClick={this.bindEditEvent(event)}>
                  Editar
                </Button>
                <Button
                  onClick={this.bindDeleteEvent(event.id)}
                  type="danger"
                >
                  Remover
                </Button>
              </Col>
            </Row>
            <h4> <span>{event.filter}</span> {event.title} </h4>
            <p> {event.description} </p>
            {pictureList}
          </div>
        )
      })
    }
  
    render() {
      const eventList = this.renderEventList()
      return (
        <div>
          <Modal
            title={this.state.modalTitle}
            visible={this.state.showModal}
            onOk={this.handleSave}
            onCancel={this.handleCancel}
            okText="Salvar"
            cancelText="Cancelar"
          >
            <EventForm
              ref={this.saveFormRef}
              event={this.state.event}
            />
          </Modal>
          <h1> Eventos </h1> {/* TODO: remove hardcoded string */}
          <Button
            type="primary"
            onClick={this.newEvent}
          >
            Novo Evento
          </Button>
          {eventList}
        </div>
      )
    }
  }
  
  function mapStateToProps(state) {
    return {
      events: state.get('eventsPage').get(EVENTS_ADMIN_KEY).get('resource').toJS(), // TODO: remove this, treat null values
      eventsRequestError: state.get('eventsPage').get(EVENTS_ADMIN_KEY).get('error'),
    }
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      fetch: (requestKey, apiUrl, name) => {
        dispatch(fetch(requestKey, apiUrl, name))
      },
      postEvent: (data) => {
        dispatch(post(EVENTS_ADMIN_KEY, urls.eventsAdmin.api, data, urls.eventsAdmin.reducerName))
      },
      putEvent: (data, id) => {
        dispatch(put(EVENTS_ADMIN_KEY, urls.eventsAdmin.api, data, id, urls.eventsAdmin.reducerName))
      },
      deleteEvent: (id) => {
        dispatch(deleteRequest(EVENTS_ADMIN_KEY, urls.eventsAdmin.api, id, urls.eventsAdmin.reducerName))
      },
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(EventsAdmin)
  