import React from "react";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";

import * as ToggleGroup from "@radix-ui/react-toggle-group";

import "./index.scss";

interface Props {
  currentElement: number;
  sendValue: (value: string) => void;
}

const ElementToggle = (props: Props) => {
  const router = useRouter();
  const { t } = useTranslation("common");
  const locale =
    router.locale && ["en", "ja"].includes(router.locale)
      ? router.locale
      : "en";

  return (
    <ToggleGroup.Root
      className="ToggleGroup"
      type="single"
      defaultValue={`${props.currentElement}`}
      aria-label="Element"
      onValueChange={props.sendValue}
    >
      <ToggleGroup.Item
        className={`ToggleItem ${locale}`}
        value="0"
        aria-label="null"
      >
        {t("elements.null")}
      </ToggleGroup.Item>
      <ToggleGroup.Item
        className={`ToggleItem wind ${locale}`}
        value="1"
        aria-label="wind"
      >
        {t("elements.wind")}
      </ToggleGroup.Item>
      <ToggleGroup.Item
        className={`ToggleItem fire ${locale}`}
        value="2"
        aria-label="fire"
      >
        {t("elements.fire")}
      </ToggleGroup.Item>
      <ToggleGroup.Item
        className={`ToggleItem water ${locale}`}
        value="3"
        aria-label="water"
      >
        {t("elements.water")}
      </ToggleGroup.Item>
      <ToggleGroup.Item
        className={`ToggleItem earth ${locale}`}
        value="4"
        aria-label="earth"
      >
        {t("elements.earth")}
      </ToggleGroup.Item>
      <ToggleGroup.Item
        className={`ToggleItem dark ${locale}`}
        value="5"
        aria-label="dark"
      >
        {t("elements.dark")}
      </ToggleGroup.Item>
      <ToggleGroup.Item
        className={`ToggleItem light ${locale}`}
        value="6"
        aria-label="light"
      >
        {t("elements.light")}
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
};

export default ElementToggle;