import React from 'react';
import { Grid, Button } from 'semantic-ui-react';
import Table from 'components/Table';

import { formatDateTime } from 'utils/datetimeHelper';
import { formatMoney } from 'utils/moneyFormatHelper';
import history from 'utils/history';
import httpHandler from 'utils/httpHandler';
import {
  PORTFOLIO_AGGREGATION_LIST_URL,
  PORTFOLIO_CURRENT_AGGREGATION_LIST_URL,
} from 'utils/constants';

export default class PortfolioAggregation extends React.Component {
  constructor(props) {
    super(props);

    const { match } = this.props;
    const { employeeId, id } = match.params;

    this.state = {
      data: [],
      portfolioId: id,
      isLoading: false,
      employeeId,
      totalPages: 1,
    };
  }

  fetchData = (filter) => {
    this.setState({ isLoading: true });
    const { portfolioId, employeeId } = this.state;

    const url = employeeId === 'current' ? PORTFOLIO_CURRENT_AGGREGATION_LIST_URL : PORTFOLIO_AGGREGATION_LIST_URL;

    httpHandler.post(url, { ...filter, portfolioId })
      .then((response) => {
        this.setState({
          data: response.data.data,
          name: response.data.name,
          totalPages: response.data.totalPages,
          isLoading: false,
        });
      })
      .catch(() => {
        this.setState({ isLoading: false });
      });
  };

  getColumns = () => [
    {
      id: 0, title: 'NAME', dataJsonPath: 'accountName', width: 4,
    },
    {
      id: 1,
      title: 'LAST LOAD',
      dataJsonPath: 'lastLoadDate',
      render: ({ lastLoadDate }) => formatDateTime(lastLoadDate),
      width: 1,
      align: 'center',
    },
    {
      id: 2,
      title: 'SHIPMENTS',
      dataJsonPath: 'totalShipmentCount',
      width: 1,
      align: 'center',
    },
    {
      id: 3,
      title: 'REVENUE',
      dataJsonPath: 'revenue',
      render: ({ revenue }) => `$${formatMoney(revenue)}`,
      width: 3,
    },
    {
      id: 4,
      title: 'EXPENSE',
      dataJsonPath: 'expense',
      render: ({ expense }) => `$${formatMoney(expense)}`,
      width: 3,
    },
    {
      id: 5,
      title: 'GROSS MARGIN',
      dataJsonPath: 'grossMargin',
      render: ({ grossMargin }) => `$${formatMoney(grossMargin)}`,
      width: 3,
    },
    {
      id: 6,
      title: 'COMMISSION',
      dataJsonPath: 'commissionPercentage',
      render: ({ commissionPercentage }) => `${formatMoney(commissionPercentage)}%`,
      width: 3,
    },
  ];

  handleRowRedirect = (row) => {
    const { employeeId } = this.state;
    const { accountId, commissionPeriodId } = row;
    history.push(`/account/aggregation/${accountId}/${employeeId}/${commissionPeriodId}`);
  };

  handleBackClick = () => {
    history.goBack();
  };

  render() {
    const {
      data, isLoading, name, totalPages,
    } = this.state;
    const firstDataValue = data[0];

    return (
      <Grid>
        <Grid.Row columns={1}>
          <h1 className="aggregation">
            {`PORTFOLIO INFO: ${name || ''}`}
          </h1>
        </Grid.Row>
        <Grid.Row columns={1} centered>
          <Table
            data={data}
            columns={this.getColumns()}
            isLoading={isLoading}
            renderLabel={() => (
              <h2 className="aggregation">
                {
                  firstDataValue
                  && (
                  <div>
                    Delivered or paid from:
                    <br />
                    {`${formatDateTime(firstDataValue.periodDate)} to ${formatDateTime(firstDataValue.periodEndDate)}`}
                  </div>
                  )
                }
              </h2>
            )}
            labelWidth={4}
            onRowRedirect={row => this.handleRowRedirect(row)}
            search
            onFetchData={this.fetchData}
            totalPages={totalPages}
          />
        </Grid.Row>
        <Grid.Row columns={2} verticalAlign="bottom">
          <Grid.Column width={1} floated="right" style={{ paddingRight: 0 }}>
            <Button
              size="big"
              color="teal"
              style={{ float: 'right', marginRight: 0 }}
              onClick={this.handleBackClick}
            >
              Back
            </Button>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    );
  }
}