var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var babelConfig = require('./babel.config');
var CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: babelConfig
        }
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
  plugins: [
  // Use the copy plugin to copy all the bundles into your statics dir.
  // That way they can be lazy-loaded.
    new CopyPlugin([
      {
        from: 'node_modules/react-ads/dist/bidders/bidder-*.js',
        to: 'bidders/',
        flatten: true,
      }
    ])
  ]
};

import React from 'react';
import { Provider, Ad } from '../../src';
import prebid from 'src/bidders/prebid';

const bidHandler = ({ id, sizes }) => ({
  prebid: {
    code: id,
    mediaTypes: {
      banner: {
        sizes: sizes
      }
    },
    bids: [{
      bidder: 'appnexus',
      params: {
        placementId: 13144370
      }
    }]
  }
});

class Example extends React.Component {
  render() {
    return (
      <Provider
        bidders={['criteoBidAdapter', 'appnexusBidAdapter']}        
        chunkSize={5}
        adUnitPath="header-bid-tag-0"
        networkId={19968336}
      >
        <Ad
          lazy
          type="lazy"
          bidHandler={bidHandler}
          adUnitPath="header-bid-tag-0"
          size={[300, 250]}
          sizeMap={[
            { viewPort: [0, 0], slots: [300, 250] },
          ]}
        />

        <Ad
          adUnitPath="header-bid-tag-1"
          bidHandler={bidHandler}
          lazy
          type="lazy"
          size={[728, 90]}
          sizeMap={[
            { viewPort: [0, 0], slots: [[728, 90], [70, 250]] },
          ]}
        />
      </Provider>
    );
  }
}

export default Example;

const Button = withAdRefresh(UnwrappedComponent);

  const el = document.querySelector('#ad-1');
  el && el.refresh();

  window.dispatchEvent(new CustomEvent('refresh-ad', { detail: { id: 'leaderboard_1' } }));

        <Ad
          lazy
          type="lazy"
          bidHandler={bidHandler}
          adUnitPath="header-bid-tag-0"
          size={[300, 250]}
          sizeMap={[
            { viewPort: [0, 0], slots: [300, 250] },
            { viewPort: [800, 200], slots: [300, 600] },
          ]}
        />

        <Ad
          lazy
          bidHandler={bidHandler}
          adUnitPath="header-bid-tag-0"
          size={[300, 250]}
        />

class UnwrappedComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      value: 'leaderboard_1',
    };
  }

  render() {
    return (
      <div>

        <div>
          <label>
            Refresh ad
          </label>
          <input
            type="text"
            value={this.state.value}
            onChange={e => this.setState({ value: e.target.value })}
          />
          <button onClick={() => this.props.refreshAdById(this.state.value)}>
            Refresh
          </button>
        </div>
       
        <br/>
       
        <div>
          <label>
            Refresh All Ads
          </label>
          <button onClick={() => {
            const adIds = [...document.querySelectorAll('[data-react-ad]')].map(x => x.id);
            this.props.refreshAdById(adIds);
          }}>
            Refresh
          </button>
        </div>
      </div>
    );
  }
}

const Button = withAdRefresh(UnwrappedComponent);

[ 
    // One Ad until infinity 
    { viewPort: [1500, 200], slots: [728, 90] }, 
    // Multiple Ads until browser width >= 1500px
    { viewPort: [1250, 200], slots: [[728, 90], [970, 250]] }, 
    // No Ads until browser width >= 1250px
    { viewPort: [0, 0], slots: [] },
]

const onSlotLoadEvent = ({id, ref, ... e}) => ({
    console.log(`slot id is ${id}`);
}

const onSlotLoadEvent = ({id, ref, ...e}) => ({
    console.log(`slot ${id} rendered`);
}

const onSlotLoadEvent = ({id, ref, ...e}) => ({
    console.log(`Impression for slot with id ${id} served`);
}

const onSlotLoadEvent = ({id, ref, ...e}) => ({
    console.log(`Slot viewability is ${e} %`);
}