import React, { useState, useEffect, useRef } from "react";

import { ConfigProvider, theme } from "antd";

import antLocale_enGB from "antd/lib/locale/en_GB";
import antLocale_enUS from "antd/lib/locale/en_US";
import antLocale_esES from "antd/lib/locale/es_ES";
import antLocale_ptBR from "antd/lib/locale/pt_BR";
import antLocale_ptPT from "antd/lib/locale/pt_PT";

import MyButton from "../../components/MyButton";

import "./index.less";

const antdVariables = {
  colorPrimary: '#5b5ce1',
  colorLink: '#5b5ce1',
  borderRadius: 5,
};

function DashboardContainer() {
  const [counter, setCounter] = useState(0);

  const refButton = useRef();

  useEffect(() => {
    $(refButton.current).fadeOut(250).fadeIn(250);
  }, [counter]);

  const onClick = () => {
    setCounter(counter + 1);
  };

  return (
    <ConfigProvider
      theme={{
        token: antdVariables,
        algorithm: theme.darkAlgorithm
      }}
      locale={
        {
          'en_us': antLocale_enUS,
          'en_gb': antLocale_enGB,
          'es_es': antLocale_esES,
          'pt_br': antLocale_ptBR,
          'pt_pt': antLocale_ptPT
        }[netuno.config.langCode]
      }
    >
      <div className="my-dashboard">
        <div ref={refButton} className="my-dashboard__button">
          <MyButton text={`ReactJS ⚡ Ant.Design 👉 Click me! ${counter}`} onClick={onClick} />
        </div>
      </div>
    </ConfigProvider>
  );
}

export default DashboardContainer;