function renderCustomTab(chart, tabInfo) {
  return ({ key, label, active, handleClick }) => {
    const isActive = active;
    const isHover = active;
    const cssActive = isActive ? 'active' : '';
    const btnStyle = _.extend(
      {},
      chart.props.styles.chartTypeTabsLiButton,
      isActive
        ? chart.props.styles.chartTypeTabsBtnActive
        : { borderTop: 'none' },
      isHover
        ? chart.props.styles.chartTypeTabsLiBtnHover
        : { backgroundColor: 'white' }
    );
    return (
      <div>
        <ul
          className="chart-type-tabs"
          style={chart.props.styles.chartTypeTabs}
        >
          <li style={chart.props.styles.chartTypeTabsLi}>
            <button
              style={btnStyle}
              onClick={e => {
                // wrap HIG handler and set state before calling it
                chart.setState({ activeTab: label });
                handleClick(e); // HIG handler
              }}
            >
              <span
                className="tab-name"
                style={chart.props.styles.chartTypeTabsLabels}
              >
                {tabInfo.name}
              </span>
              <span
                className="percentage"
                style={chart.props.styles.chartTypeTabsPercentage}
              >
                {tabInfo.formattedLabel()}
              </span>
              <span
                className="usage"
                style={chart.props.styles.chartTypeTabsUsage}
              >
                {tabInfo.label}
              </span>
            </button>
          </li>
        </ul>
      </div>
    );
  };
}

function postUrlRequest(contractNumber) {
  return function lambda() {
    return postUrl({
      url: '/usage/' + contractNumber + '/query',
      query: {
        fields: ['contractYear', 'usageCategory'],
        metrics: ['uniqueProducts', 'uniqueUsers', 'tokensConsumed'],
        where: "usageCategory in ('DESKTOP_PRODUCT')",
      },
    }).then(function(response) {
      const usage = response.result.rows[0][3];
      // Total unique Users
      return usage;
    });
  };
}

// Chart Renderer
export function getMainRender(category) {
  return function(data) {
    const contract = data.contract;
    const styles = this.props.styles;
    const usage = data.data;
    const selectedYear = this.state.contractYear || getCurrentYear(contract);

    const DEFAULT_TAB = 'Products used';
    const currentUsage = getUsage(
      usage,
      selectedYear,
      this.state.activeTab || DEFAULT_TAB
    );



    formattedTokensConsumedMax = formatLargeNumber(tokensConsumedMax);
    usersMax = separateNumber(usersMax.toString());

    let fetchData = postUrlRequest(contract.contractNumber);

    const tabInfos = [
      {
        name: 'Products used',
        formattedLabel: fetchData,
        label: '  ',
        emptyMessage: 'No products used',
      },
      {
        name: 'Tokens used',
        formattedLabel: fetchData,
        label: separateNumber(tokensConsumedMax),
        emptyMessage: 'No tokens used',
      },
      {
        name: 'Unique users',
        formattedLabel: fetchData,
        label: '  ',
        emptyMessage: 'No unique users',
      },
    ];


    return (
      <section style={styles.chartTypeTabs}>
        <div style={styles.divStyles}>
          <style type="text/css">
            {`
        #container .hig__s {
          justify-content: left !important;
        }
        #container .hig__tabs__tab-label {
          color: #1b97d5;
        }

        .hig__tabs {
            margin:0;
            padding:0;
        }

        #container .hig__dropdown, #container .hig__text-field {
          min-width: 150px;
          max-width: 250px;
          margin: 0;
          padding: 0;
        }
        .chart-type-tabs li button:hover {
          background-color: #eaeaea !important;
        }
        `}
          </style>
          {
            <div>
              <Tabs align="center">
                {tabInfos.map(tabInfo => {
                  return (
                    <Tab
                      label={tabInfo.name}
                      render={renderCustomTab(this, tabInfo)}
                    >
                      {currentUsage.length === 0 ? (
                        <Message>{tabInfo.emptyMessage}</Message>
                      ) : (
                        <ReactHighcharts
                          config={getChartConfig(
                            this.chartConfig,
                            currentUsage,
                            contract,
                            selectedYear,
                            this.state.activeTab
                          )}
                          isPureConfig={false}
                        />
                      )}
                    </Tab>
                  );
                })}
              </Tabs>
            </div>
          }
        </div>
      </section>
    );
  };
}