// SPDX-License-Identifier: AGPL-3.0-or-later
// SPDX-FileCopyrightText: 2020-2022 grommunio GmbH

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@mui/styles';
import TopBar from '../components/TopBar';
import { Paper, Table, TableBody, TableCell, TableHead, TableRow, TableSortLabel, Typography } from '@mui/material';
import { withTranslation } from 'react-i18next';
import { connect } from 'react-redux';
import { selectDrawerDomain } from '../actions/drawer';

const styles = theme => ({
  root: {
    flex: 1,
    padding: theme.spacing(2, 2, 2, 2),
    overflowY: "scroll",
    overflowX: "hidden",
  },
  base: {
    flexDirection: 'column',
    padding: theme.spacing(2, 0, 2, 0),
    flex: 1,
    display: 'flex',
    overflow: 'auto',
  },
  pageTitle: {
    margin: theme.spacing(2, 2, 2, 2),
  },
  toolbar: theme.mixins.toolbar,
});

class Menu extends PureComponent {

  state = {
    orderBy: 'domainname',
    order: 'asc',
    sortedDomains: [],
  }

  columns = [
    { label: "Domain", value: "domainname" },
    { label: "Address", value: "address" },
    { label: "Title", value: "title" },
    { label: "Maximum users", value: "maxUser" },
  ];

  handleNavigation = (path) => (event) => {
    const { history, selectDomain } = this.props;
    event.preventDefault();
    selectDomain(path);
    history.push(`/${path}`);
  };

  handleSort = orderBy => () => {
    const sortedDomains = [...this.props.domains];
    const { order: stateOrder, orderBy: stateOrderBy } = this.state;
    const order = stateOrderBy === orderBy && stateOrder === "asc" ? "desc" : "asc";
    if(orderBy === 'maxUser') {
      if(order === 'asc') {
        sortedDomains.sort((a, b) => a[orderBy] - b[orderBy]);
      } else {
        sortedDomains.sort((a, b) => b[orderBy] - a[orderBy]);
      }
    } else {
      if(order === 'asc') {
        sortedDomains.sort((a, b) => a[orderBy].localeCompare(b[orderBy]));
      } else {
        sortedDomains.sort((a, b) => b[orderBy].localeCompare(a[orderBy]));
      }
    }
    this.setState({ sortedDomains, order, orderBy });
  }

  render() {
    const { classes, t, domains } = this.props;
    const { orderBy, order, sortedDomains } = this.state;
    return (
      <div className={classes.root}>
        <TopBar onAdd={this.handleAdd} title="Dashboard"/>
        <div className={classes.toolbar}></div>
        <Typography variant="h2" className={classes.pageTitle}>
          {t("Dashboard")}
        </Typography>
        <div className={classes.base}>
          <Paper elevation={1}>
            <Table size="small">
              <TableHead>
                <TableRow>
                  {this.columns.map((column) => (
                    <TableCell key={column.value}>
                      <TableSortLabel
                        active={orderBy === column.value}
                        align="left"
                        direction={orderBy === column.value ? order : "asc"}
                        onClick={this.handleSort(column.value)}
                      >
                        {t(column.label)}
                      </TableSortLabel>
                    </TableCell>
                  ))}
                </TableRow>
              </TableHead>
              <TableBody>
                {(sortedDomains.length > 0 ? sortedDomains : domains).map((obj, idx) => 
                  <TableRow key={idx} hover onClick={this.handleNavigation(obj.ID)}>
                    <TableCell>
                      {obj.domainname}{" "}
                      {obj.domainStatus === 3 ? `[${t("Deactivated")}]` : ""}
                    </TableCell>
                    <TableCell>{obj.address}</TableCell>
                    <TableCell>{obj.title}</TableCell>
                    <TableCell>{obj.maxUser}</TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </Paper>
        </div>
      </div>
    );
  }
}

Menu.propTypes = {
  classes: PropTypes.object.isRequired,
  t: PropTypes.func.isRequired,
  history: PropTypes.object.isRequired,
  domains: PropTypes.array.isRequired,
  selectDomain: PropTypes.func.isRequired,
};

const mapStateToProps = state => {
  return {
    domains: state.drawer.Domains,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    selectDomain: id => dispatch(selectDrawerDomain(id)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(
  withTranslation()(withStyles(styles)(Menu)));