import { Axis, Chart, Geom, Legend, Tooltip } from 'bizcharts';
import { DataSet, PeekdataApi, ReportFilterOperationType, ReportSortDirectionType, IReportRequest } from 'peekdata-datagateway-api-sdk';
import React from 'react';
import { dataapi } from 'src/constants/dataapi';

const request: IReportRequest = {
  scopeName: "Mortgage-Lending",
  dataModelName: "Servicing-PostgreSQL",
  dimensions: [
    "cityname",
    "currency"
  ],
  metrics: [
    "loanamount",
    "propertyprice"
  ],
  filters: {
    dateRanges: [
      {
        from: "2015-01-01",
        to: "2017-12-31",
        key: "closingdate"
      }
    ],
    singleKeys: [
      {
        key: "countryname",
        operation: ReportFilterOperationType.EQUALS,
        values: [
          "Poland"
        ]
      }
    ]
  },
  sortings: {
    dimensions: [
      {
        key: "cityname",
        direction: ReportSortDirectionType.ASC
      }
    ],
    metrics: [
      {
        key: "propertyprice",
        direction: ReportSortDirectionType.ASC
      }
    ]
  },
  options: {
    rows: {
      limitRowsTo: "100"
    }
  }
};

const peekdataApi = new PeekdataApi({
  baseUrl: "https://demo.peekdata.io:8443/datagateway/rest/v1",
  timeout: 60000,
});

export class BizChartsBar extends React.PureComponent {

  constructor(props) {
    super(props);

    this.state = {
      isLoading: false,
      error: null,
      values: null,
    };
  }

  componentDidMount() {
    this.setState({ isLoading: true });

    peekdataApi.data.getDataOptimized(request)
      .then(response => {
        const dataSet = new DataSet(response);
        const values = dataSet.getValues();

        this.setState({ isLoading: false, values });
      })
      .catch(error => {
        this.setState({ isLoading: false, error: error.toString() });
      });
  }

  render() {
    const { isLoading, error, values } = this.state;

    if (error) {
      return error;
    }

    if (isLoading || !values || values.length < 1) {
      return null;
    }

    const data = values.map(v => ({
      label: v.dimensions.join(', '),
      metric: v.metric.title,
      value: v.value,
    }));

    return (
      <Chart data={data} height={500} forceFit={true}>
        <Legend />
        <Axis name='label' />
        <Axis name='value' />
        <Tooltip crosshairs={{ type: 'y' }} />
        <Geom type='interval' position='label*value' color='metric' adjust={[{ type: 'dodge', marginRatio: 1 / 32 }]} />
      </Chart>
    );
  }
}