import AchoViz from '../src';
import './index.css';

import { raw as lineRaw } from './LineChart/data';
import fgData from './ForceGraph/data';
import { data as barData } from './BarChart/data';
import { data as hexData } from './HexBin/data';
import { data as dendData } from './Dendro/data';
import { data as bubbData } from './Bubble/data';
import { data as pieData } from './Pie/data';
import { data as loliData } from './Lolli/data';
import { data as scatData } from './Scatter/data';
import { data as bpData } from './BoxPlot/data';
import { timeParse } from 'd3';

const init = () => {
  const _gallery = document.querySelector('#gallery');
  const gallery = _gallery as Element;

  const lineContainer = document.createElement('div');
  lineContainer.setAttribute('id', 'line_container');
  lineContainer.setAttribute('class', 'display_item');
  lineContainer.addEventListener('click', () => {
    window.location.href = 'linechart.html';
  });

  const fgContainer = document.createElement('div');
  fgContainer.setAttribute('id', 'fg_container');
  fgContainer.setAttribute('class', 'display_item');

  const barContainer = document.createElement('div');
  barContainer.setAttribute('id', 'bar_container');
  barContainer.setAttribute('class', 'display_item');
  barContainer.addEventListener('click', () => {
    window.location.href = 'barchart.html';
  });

  const hexContainer = document.createElement('div');
  hexContainer.setAttribute('id', 'hex_container');
  hexContainer.setAttribute('class', 'display_item');

  const dendContainer = document.createElement('div');
  dendContainer.setAttribute('id', 'dendro_container');
  dendContainer.setAttribute('class', 'display_item');

  const scatCont = document.createElement('div');
  scatCont.setAttribute('id', 'scat_container');
  scatCont.setAttribute('class', 'display_item');
  scatCont.addEventListener('click', () => {
    window.location.href = 'scatter.html';
  });

  const bubbleContainer = document.createElement('div');
  bubbleContainer.setAttribute('id', 'bubble_container');
  bubbleContainer.setAttribute('class', 'display_item');

  const pieContainer = document.createElement('div');
  pieContainer.setAttribute('id', 'pie_container');
  pieContainer.setAttribute('class', 'display_item');
  pieContainer.addEventListener('click', () => {
    window.location.href = 'pie.html';
  });

  const lolliContainer = document.createElement('div');
  lolliContainer.setAttribute('id', 'loli_container');
  lolliContainer.setAttribute('class', 'display_item');

  const bpCont = document.createElement('div');
  bpCont.setAttribute('id', 'bp_container');
  bpCont.setAttribute('class', 'display_item');
  bpCont.addEventListener('click', () => {
    window.location.href = 'boxplot.html';
  });

  gallery.appendChild(lineContainer);
  gallery.appendChild(fgContainer);
  gallery.appendChild(barContainer);
  gallery.appendChild(hexContainer);
  gallery.appendChild(dendContainer);
  gallery.appendChild(scatCont);
  gallery.appendChild(bubbleContainer);
  gallery.appendChild(pieContainer);
  gallery.appendChild(lolliContainer);
  gallery.appendChild(bpCont);

  const lineData = lineRaw.map((d) => ({ ...d, date: timeParse('%Y-%m-%d')(d.date) }));
  const margin = { top: 10, right: 30, bottom: 30, left: 60 };
  const lineOpts = { height: 400, width: 460, margin, xField: 'date', yField: 'value', xTransform: 'time' };
  const lineChart = new AchoViz.LineChart({ ...lineOpts, elementId: '#line_container', data: lineData });
  lineChart.render();

  const fg = new AchoViz.ForceGraph({ elementId: '#fg_container' });
  fg.loadData(fgData);

  const barOpts = { height: 400, width: 460, xField: 'country', yField: 'value' };
  const bar = new AchoViz.BarChart({ ...barOpts, elementId: '#bar_container', data: barData });

  bar.setMargin({ top: 30, right: 30, bottom: 10, left: 60 });
  bar.render();

  const hexBin = new AchoViz.HexBin({ elementId: '#hex_container' });
  hexBin.loadData(hexData);

  const denMar = { top: 0, right: 50, left: 50, bottom: 0 };
  const denOpts = { height: 400, width: 460, margin: denMar };
  const dendro = new AchoViz.Dendro({ ...denOpts, elementId: '#dendro_container', data: dendData });
  dendro.render();

  const scatMar = { top: 10, right: 30, bottom: 30, left: 60 };
  const scatOPts = { height: 400, width: 460, data: scatData, margin: scatMar };
  const scatter = new AchoViz.Scatter({ ...scatOPts, elementId: '#scat_container' });
  scatter.render();

  const bubMar = { top: 10, right: 20, bottom: 30, left: 50 };
  const bubOpts = { height: 420, width: 500, margin: bubMar, xField: 'gdpPercap', yField: 'lifeExp', zField: 'pop' };
  const bubble = new AchoViz.Bubble({ ...bubOpts, elementId: '#bubble_container', data: bubbData });
  bubble.render();

  const pie = new AchoViz.Pie({ elementId: '#pie_container', data: pieData, margin: 10 });
  pie.render();

  const loliMar = { top: 20, right: 30, bottom: 20, left: 60 };
  const loliOpts = { height: 500, width: 460, margin: loliMar, xField: 'country', yField: 'value' };
  const loli = new AchoViz.Lolli({ ...loliOpts, elementId: '#loli_container', data: loliData });
  loli.render();

  const bpMar = { top: 10, right: 30, bottom: 30, left: 40 };
  const bpOpts = { data: bpData, height: 400, width: 400, margin: bpMar };
  const bp = new AchoViz.BoxPlot({ ...bpOpts, elementId: '#bp_container' });
  bp.render();
};

init();