import React, { useContext, useState } from "react";
import styled from "styled-components";
import { FullAnalysisContext } from "..";
import OutsideAlerter from "../../../outsideEventChecker";
import classNames from "classnames";
import useTranslation from "../../../../hooks/useTranslation";
import wordStore from "../../../../mc/wordStore.json";


const TranslateDropdown = ({ onChange, loading }) => {
  const { findText } = useTranslation(wordStore);
  const { languageData } = useContext(FullAnalysisContext);
  const [selected, setSelected] = useState(null);
  const [toggle, setToggle] = useState(false);
  const languages = languageData?.data?.results;
  if (!languages?.length) return null;
  return (
    <OutsideAlerter
      handleClick={() => {
        setToggle(false);
      }}
    >
      <Container>
        <DropdownMenu
          className={classNames(loading && "disabled")}
          onClick={() => {
            if (loading) return;
            setToggle(!toggle);
          }}
        >
          <WordIcon />{" "}
          {loading
            ? findText("Please wait...")
            : selected?.name || findText("Translate")}
          <Arrow />
        </DropdownMenu>
        {toggle && (
          <Dropdown>
            {languages?.map((item) => (
              <li
                key={item?.id}
                onClick={() => {
                  setSelected(item);
                  onChange?.(item);
                  setToggle(false);
                }}
              >
                <img src={item?.url} alt="" />
                <span> {item?.name}</span>
              </li>
            ))}
          </Dropdown>
        )}
      </Container>
    </OutsideAlerter>
  );
};
export default TranslateDropdown;
const Container = styled.div`
  position: relative;
  width: fit-content;
  display: flex;
  justify-content: flex-end;

  min-width: 175px;
`;
const Dropdown = styled.ul`
  position: absolute;
  top: 32px;
  right: 0;
  border-radius: 8px;
  background-color: white;
  list-style: none;
  display: flex;
  flex-direction: column;
  height: 150px;
  overflow-y: auto;
  border: 2px solid #eaeaea;
  gap: 0px !important;
  z-index: 5;
  li {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    cursor: pointer;
    &:hover {
      background-color: #f5f5f5;
    }
    span {
      white-space: nowrap;
      font-size: 14px;
    }
    img {
      width: 16px;
    }
  }
`;
const DropdownMenu = styled.div`
  border-radius: 32px;
  border: 1px solid #febf10;
  gap: 4px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 32px;
  width: fit-content;

  font-size: 14px;
  font-weight: 600;
  color: #febf10;
  cursor: pointer;
  img {
    width: 16px;
  }
  &.disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
`;
const WordIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
  >
    <g clip-path="url(#clip0_53303_175713)">
      <path
        d="M5 5H11.586C11.7838 5.00004 11.977 5.05871 12.1415 5.1686C12.3059 5.27848 12.434 5.43465 12.5097 5.61735C12.5853 5.80005 12.6052 6.00108 12.5666 6.19503C12.528 6.38898 12.4328 6.56715 12.293 6.707L11 8"
        stroke="#FEBF10"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <path
        d="M8 8C8 9.5 8.5 11 6 13"
        stroke="#FEBF10"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <path
        d="M12 20L16 11L20 20"
        stroke="#FEBF10"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
      <path
        d="M19.1004 18H12.9004"
        stroke="#FEBF10"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </g>
    <defs>
      <clipPath id="clip0_53303_175713">
        <rect width="24" height="24" fill="white" />
      </clipPath>
    </defs>
  </svg>
);
const Arrow = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
  >
    <path
      d="M3.51563 8.46422L12.0006 16.9492L20.4856 8.46422L19.0716 7.04922L12.0006 14.1212L4.92962 7.04922L3.51563 8.46422Z"
      fill="#FEBF10"
    />
  </svg>
);
