import React, { Component } from 'react';
import { Button, Page, Table } from 'proa-react';
import PropTypes from 'prop-types';
import 'proa/dist/css/proa.min.css';
import { Link } from 'react-router';

class ConfigIndexPage extends Component {
  constructor(props) {
    super(props);

    this.contentRender = this.contentRender.bind(this);
  }

  componentDidMount() {
    this.props.fetchData();
    console.log(this.props);
  }

  contentRender() {
    if (this.props.error.status !== 0) {
      return (
        <div>
          <p>Erro: {this.props.error.error} </p>
          <p>Status: {this.props.error.status} </p>
        </div>
      );
    } else if (this.props.filas.length === 0) {
      return (
        <div>
          <p>Nenhuma fila cadastrada!</p>
        </div>
      );
    }

    const content = this.props.filas.map(fila => (
      <Table.Row>
        <Table.Cell>{fila.queueName}</Table.Cell>
        <Table.Cell>{fila.squadName}</Table.Cell>
        <Table.Cell>{fila.email}</Table.Cell>
        <Table.Cell />
      </Table.Row>
    ));

    return (
      <Table>
        <Table.Head>
          <Table.Row>
            <Table.HeadCell>Nome da fila</Table.HeadCell>
            <Table.HeadCell>Squad</Table.HeadCell>
            <Table.HeadCell>Email de Contato</Table.HeadCell>
            <Table.HeadCell>Ações</Table.HeadCell>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          {content}
        </Table.Body>
      </Table>
    );
  }

  render() {
    const content = this.contentRender();
    return (
      <Page>
        <Page.Header title="Filas">
          <Link to="/home">
            <Button>Nova fila</Button>
          </Link>
        </Page.Header>
        <Page.Section>
          {content}
        </Page.Section>
      </Page>
    );
  }
}

ConfigIndexPage.propTypes = {
  filas: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number,
    description: PropTypes.string,
    email: PropTypes.string,
    max_pool_size_by_type: PropTypes.number,
    min_poll_size_by_type: PropTypes.number,
    minutes_requeue: PropTypes.number,
    queue_name: PropTypes.string,
    squad_name: PropTypes.string,
    status: PropTypes.string,
    type: PropTypes.string,
    warning_email: PropTypes.string,
  })),
  error: PropTypes.shape({
    error: PropTypes.string,
    message: PropTypes.string,
    path: PropTypes.string,
    status: PropTypes.number,
    timestamp: PropTypes.number,
  }),
  fetchData: PropTypes.func.isRequired,
};

ConfigIndexPage.defaultProps = {
  filas: [
    {
      id: 0,
      description: '',
      email: '',
      max_pool_size_by_type: 0,
      min_poll_size_by_type: 0,
      minutes_requeue: 0,
      queue_name: '',
      squad_name: '',
      status: '',
      type: '',
      warning_email: '',
    },
  ],
  error: {
    error: '',
    message: '',
    path: '',
    status: 0,
    timestamp: 0,
  },
};

export default ConfigIndexPage;