import React, { Component } from "react";
import { Table, Icon, Segment, Grid } from "semantic-ui-react";
import Button from '@material-ui/core/Button';
import TablePagination from '@material-ui/core/TablePagination';

class ExpandableTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.orders.slice(props.page * props.rowsPerPage, (props.page + 1) * props.rowsPerPage),
      expandedRows: []
    };
  }

  handleRowClick(event,rowId) {
    const currentExpandedRows = this.state.expandedRows;
    const isRowCurrentlyExpanded = currentExpandedRows.includes(rowId);
    const newExpandedRows = isRowCurrentlyExpanded
      ? currentExpandedRows.filter(id => id !== rowId)
      : currentExpandedRows.concat(rowId);
    this.setState({ expandedRows: newExpandedRows });
  }

  renderItemCaret(rowId) {
    const currentExpandedRows = this.state.expandedRows;
    const isRowCurrentlyExpanded = currentExpandedRows.includes(rowId);

    if (isRowCurrentlyExpanded) {
      return <Icon name="caret down" />;
    } else {
      return <Icon name="caret right" />;
    }
  }

  renderItemDetails(item) {
    return (
      <Segment basic>
        <Grid columns={this.props.role===2?8:7}>
          <Grid.Column>
            <div className="expanded-content">
            <h5>Order: </h5>
              {item.meals.map((meal)=>{
                  return <div className="details" key={meal._id}>
                    <span><b>Quantity: </b>{meal.quantity} </span><span><b>Meal:</b> {meal.name}</span> <span><b>Price:</b> {meal.price/100+"€"}</span>
                  </div>
                })
              }
            </div>
            <div className="expanded-content">
              {item.history.length>0&&<h5>Status history: </h5>}
            {item.history.map((entry)=>{
                  return <div className="details" key={entry._id}>
                    <span>{entry.time.replace('T',' ').split('.')[0]} </span><span><b>:&emsp;</b> { entry.status}</span>
                  </div>
                })
              }
            </div>
          </Grid.Column>
        </Grid>
      </Segment>
    );
  }

  renderItem(item, index) {
    const clickCallback = (event) => this.handleRowClick(event,index);
    const itemRows = [
      <Table.Row onClick={clickCallback} key={"row-data-" + index}>
        <Table.Cell>{this.renderItemCaret(index)}</Table.Cell>
        <Table.Cell>{item.createdAt.replace('T',' ').split('.')[0]}</Table.Cell>
        <Table.Cell>{item.updatedAt.replace('T',' ').split('.')[0]}</Table.Cell>
        <Table.Cell>{item.restaurant.name}</Table.Cell>
        <Table.Cell>{item.totalAmmount/100+"€"}</Table.Cell>
        {this.props.role===2&&<Table.Cell>{item.customer.name}</Table.Cell>}
        <Table.Cell>{item.status}</Table.Cell>
        <Table.Cell>
          {item.status==="Placed"&&this.props.role===3&&
            <Button variant="contained" className="cancel" onClick={(event)=>{event.stopPropagation();this.props.handleStatus(item._id,"Canceled")}}>
              Cancel
            </Button>}
          {item.status==="Placed"&&this.props.role===2&&
          <Button variant="contained" className="processing" onClick={(event)=>{event.stopPropagation();this.props.handleStatus(item._id,"Processing")}}>
            Processing
          </Button>}
          {item.status==="Processing"&&this.props.role===2&&
          <Button variant="contained" className="inroute" onClick={(event)=>{event.stopPropagation();this.props.handleStatus(item._id,"In Route")}}>
            In Route
          </Button>}
          {item.status==="In Route"&&this.props.role===2&&
          <Button variant="contained" className="delivered" onClick={(event)=>{event.stopPropagation();this.props.handleStatus(item._id,"Delivered")}}>
            Delivered
          </Button>}
          {item.status==="Delivered"&&this.props.role===3&&
          <Button variant="contained" className="received" onClick={(event)=>{event.stopPropagation();this.props.handleStatus(item._id,"Received")}}>
            Received
          </Button>}
          {(item.status==="Received"||item.status==="Canceled")&&this.props.role===2&&!item.restaurant.blockedUsers.includes(item.customer._id)&&
          <Button variant="contained" className="block" onClick={(event)=>{event.stopPropagation();this.props.blockUser("block",item.customer._id, item.restaurant._id)}}>
            Block user
          </Button>}
          {(item.status==="Received"||item.status==="Canceled")&&this.props.role===2&&item.restaurant.blockedUsers.includes(item.customer._id)&&
          <Button variant="contained" className="block" onClick={(event)=>{event.stopPropagation();this.props.blockUser("unblock", item.customer._id, item.restaurant._id)}}>
            Unblock user
          </Button>}
        </Table.Cell>
      </Table.Row>
    ];

    if (this.state.expandedRows.includes(index)) {
      itemRows.push(
        <Table.Row key={"row-expanded-" + index}>
          <Table.Cell colSpan={this.props.role===2?"8":"7"}>{this.renderItemDetails(item)}</Table.Cell>
        </Table.Row>
      );
    }
    return itemRows;
  }

  render() {
    let allItemRows = [];
    this.state.data.forEach((item, index) => {
      const perItemRows = this.renderItem(item, index);
      allItemRows = allItemRows.concat(perItemRows);
    });

    return (
      <Table selectable>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell />
            <Table.HeaderCell>Date</Table.HeaderCell>
            <Table.HeaderCell>Last update</Table.HeaderCell>
            <Table.HeaderCell>Restaurant</Table.HeaderCell>
            <Table.HeaderCell>Total Ammount</Table.HeaderCell>
            {this.props.role===2&&<Table.HeaderCell>User</Table.HeaderCell>}
            <Table.HeaderCell>Status</Table.HeaderCell>
            <Table.HeaderCell>Actions</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>{allItemRows}</Table.Body>
        <Table.Footer>
          <Table.Row>
            <TablePagination
              count={this.props.orders.length}
              page={this.props.page}
              rowsPerPage={this.props.rowsPerPage}
              onChangePage={this.props.onChangePage}
              rowsPerPageOptions={[10, 25]}
              onChangeRowsPerPage={this.props.onChangeRowsPerPage}
            />
          </Table.Row>
        </Table.Footer>
      </Table>
    );
  }
}

export default ExpandableTable