import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactTooltip from "react-tooltip";

import './i18n';
import MapChart from "./MapChart";
import GraphChart from "./GraphChart";
import PiChart from './PiChart';
import CBVBars from './BarChart';
import ProgressionChart from './ProgressionChart';
import ProgressionChart2021 from './ProgressionChart2021';
import ProgressionChart2022 from './ProgressionChart2022';
import CBVBars2021 from './BarChart2021';

function CBVGlobe(props) {
  const [content, setContent] = useState("");
  const [countries] = useState(props.countries);
  return (
    <div>
      <MapChart setTooltipContent={setContent} countries={countries} />
      <ReactTooltip backgroundColor="#715f8a" textColor="white">{content}</ReactTooltip>
    </div>
  );
}

window.renderGlobe = (el) => {
  ReactDOM.render(<CBVGlobe countries={JSON.parse(el.dataset.countries)} />, el);
}


function CBVGraph(props) {
  const [data] = useState(props.data);
  return (
    <div>
      <GraphChart data={data} />
    </div>
  );
}

window.renderGraph = (el) => {
  ReactDOM.render(<CBVGraph data={JSON.parse(el.dataset.points)} />, el);
}

function CBVPI(props) {
  const [data] = useState(props.data);
  const [color] = useState(props.color);
  return (
    <PiChart data={data} color={color} />
  );
}

window.renderPI = (el) => {
  ReactDOM.render(<CBVPI color={el.dataset.color} data={JSON.parse(el.dataset.points)} />, el);
}

function CBVBarChart2021(props) {
  const [data] = useState(props.data);
  return (
    <CBVBars2021 data={data}  />
  );
}

window.renderBarChart2021 = (el) => {
  ReactDOM.render(<CBVBarChart2021 data={JSON.parse(el.dataset.points)} />, el);
}

function CBVBarChart(props) {
  const [data] = useState(props.data);
  return (
    <CBVBars data={data}  />
  );
}

window.renderBarChart = (el) => {
  ReactDOM.render(<CBVBarChart data={JSON.parse(el.dataset.points)} />, el);
}

function CBVProgression(props) {
  return (
    <ProgressionChart  />
  );
}

window.renderProgression = (el) => {
  ReactDOM.render(<CBVProgression />, el);
}

function CBVProgression2021(props) {
  return (
    <ProgressionChart2021  />
  );
}

window.renderProgression2021 = (el) => {
  ReactDOM.render(<CBVProgression2021 />, el);
}

function CBVProgression2022(props) {
  return (
    <ProgressionChart2022  />
  );
}

window.renderProgression2022 = (el) => {
  ReactDOM.render(<CBVProgression2022 />, el);
}