import React, { useState } from "react";
import { Chart } from "react-google-charts";
import { data, options } from "./data";
import {
  Badge,
  Container,
  ToolTipContainer,
  ToolTipContent,
  ToolTipWrapper,
} from "./index.styled";
import { UsaFlagIcon } from "../../assets/svg/flags";
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const GraphMap = () => {
  const { findText } = useTranslation(wordStore);
  const [showTooltip, setShowTooltip] = useState(false);
  const [tooltipContent, setTooltipContent] = useState("");
  const [tooltipPosition, setTooltipPosition] = useState({
    top: 0,
    left: 0,
  });
  return (
    <Container>
      {showTooltip && (
        <ToolTip content={tooltipContent} position={tooltipPosition} />
      )}
      <Badge>
        <span></span>
        <p>{findText("Top locations")}</p>
      </Badge>
      <Chart
        chartType={findText("GeoChart")}
        width="100%"
        height="100%"
        data={data}
        options={options}
      />
    </Container>
  );
};
const ToolTip = ({ content, position }) => {
  const { findText } = useTranslation(wordStore);
  return (
    <ToolTipContainer
      style={{
        ...position,
      }}
    >
      <Arrow />
      <ToolTipWrapper>
        <span>
          <UsaFlagIcon />
        </span>
        <ToolTipContent>
          <p>{findText("United States")}</p>
          <ul>
            <li>
              <p>{findText("$250k+")}</p>
              <p>{findText("Total Revenue")}</p>
            </li>
            <li>
              <p>{findText("250k+")}</p>
              <p>{findText("No. of Users")}</p>
            </li>
          </ul>
        </ToolTipContent>
      </ToolTipWrapper>
    </ToolTipContainer>
  );
};
const Arrow = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="14"
    viewBox="0 0 24 14"
    fill="none"
  >
    <path
      d="M11.9124 14L0.777781 0.500002L23.047 0.5L11.9124 14Z"
      fill="#B0DCDC"
    />
  </svg>
);
export default GraphMap;
