import { useTranslation } from "react-i18next";
import { supportedLngs } from "./config";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/shadcn/ui/dropdown-menu"

import styled from 'styled-components';

const TopNavBarWrapper = styled.div`
  padding: 20px;
  gap: 0;
  display: flex;
  margin-top: 0px;
  gap: 30px;
 * > i {
  font-size: 27.5px;
  }
`

const countryflagIcons = {
  en: `<img src="data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 513 343' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_301_131)'%3E%3Cpath d='M0 0.957031H513V342.957H0V0.957031Z' fill='white'/%3E%3Cpath d='M0 0.957031H513V27.257H0V0.957031ZM0 53.557H513V79.857H0V53.557ZM0 106.157H513V132.457H0V106.157ZM0 158.757H513V185.057H0V158.757ZM0 211.457H513V237.757H0V211.457ZM0 264.057H513V290.357H0V264.057ZM0 316.657H513V342.957H0V316.657Z' fill='%23D80027'/%3E%3Cpath d='M0 0.957031H256.5V185.057H0V0.957031Z' fill='%232E52B2'/%3E%3Cpath d='M47.8002 139.857L43.8002 127.057L39.4002 139.857H26.2002L36.9002 147.557L32.9002 160.357L43.8002 152.457L54.4002 160.357L50.3002 147.557L61.2002 139.857H47.8002ZM104.1 139.857L100 127.057L95.8002 139.857H82.6002L93.3002 147.557L89.3002 160.357L100 152.457L110.8 160.357L106.8 147.557L117.5 139.857H104.1ZM160.6 139.857L156.3 127.057L152.3 139.857H138.8L149.8 147.557L145.6 160.357L156.3 152.457L167.3 160.357L163.1 147.557L173.8 139.857H160.6ZM216.8 139.857L212.8 127.057L208.6 139.857H195.3L206.1 147.557L202.1 160.357L212.8 152.457L223.6 160.357L219.3 147.557L230.3 139.857H216.8ZM100 76.2572L95.8002 89.0572H82.6002L93.3002 96.9572L89.3002 109.557L100 101.757L110.8 109.557L106.8 96.9572L117.5 89.0572H104.1L100 76.2572ZM43.8002 76.2572L39.4002 89.0572H26.2002L36.9002 96.9572L32.9002 109.557L43.8002 101.757L54.4002 109.557L50.3002 96.9572L61.2002 89.0572H47.8002L43.8002 76.2572ZM156.3 76.2572L152.3 89.0572H138.8L149.8 96.9572L145.6 109.557L156.3 101.757L167.3 109.557L163.1 96.9572L173.8 89.0572H160.6L156.3 76.2572ZM212.8 76.2572L208.6 89.0572H195.3L206.1 96.9572L202.1 109.557L212.8 101.757L223.6 109.557L219.3 96.9572L230.3 89.0572H216.8L212.8 76.2572ZM43.8002 25.6572L39.4002 38.2572H26.2002L36.9002 46.1572L32.9002 58.8572L43.8002 50.9572L54.4002 58.8572L50.3002 46.1572L61.2002 38.2572H47.8002L43.8002 25.6572ZM100 25.6572L95.8002 38.2572H82.6002L93.3002 46.1572L89.3002 58.8572L100 50.9572L110.8 58.8572L106.8 46.1572L117.5 38.2572H104.1L100 25.6572ZM156.3 25.6572L152.3 38.2572H138.8L149.8 46.1572L145.6 58.8572L156.3 50.9572L167.3 58.8572L163.1 46.1572L173.8 38.2572H160.6L156.3 25.6572ZM212.8 25.6572L208.6 38.2572H195.3L206.1 46.1572L202.1 58.8572L212.8 50.9572L223.6 58.8572L219.3 46.1572L230.3 38.2572H216.8L212.8 25.6572Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_301_131'%3E%3Crect width='513' height='342' fill='white' transform='translate(0 0.957031)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A" alt="img" />`,
  ko: `<img src="data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 513 342' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_301_867)'%3E%3Cpath d='M0 -0.00585938H513V341.994H0V-0.00585938Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M78.3218 103.588L125.749 32.4472L138.229 40.7677L90.8025 111.908L78.3218 103.588ZM96.1069 115.444L143.534 44.3039L156.014 52.6244L108.588 123.765L96.1069 115.444ZM113.892 127.301L161.319 56.1606L173.799 64.4811L126.373 135.621L113.892 127.301ZM339.17 277.486L386.597 206.345L399.077 214.666L351.651 285.806L339.17 277.486ZM356.955 289.342L404.382 218.202L416.862 226.523L369.436 297.663L356.955 289.342ZM434.647 238.379L387.221 309.52L374.74 301.199L422.167 230.059L434.647 238.379Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M413.083 282.894L353.8 243.372L360.734 232.971L420.017 272.493L413.083 282.894Z' fill='white'/%3E%3Cpath d='M327.625 218.41C353.818 179.121 343.201 126.036 303.911 99.8431C264.622 73.65 211.537 84.267 185.344 123.557C159.151 162.846 169.768 215.931 209.058 242.124C248.348 268.317 301.432 257.7 327.625 218.41Z' fill='%23CA163A'/%3E%3Cpath d='M185.344 123.557C172.254 143.191 177.566 169.75 197.201 182.84C216.836 195.93 243.395 190.618 256.485 170.983C269.574 151.349 296.133 146.037 315.768 159.127C335.403 172.216 340.715 198.776 327.625 218.41C301.445 257.68 248.327 268.303 209.058 242.124C169.788 215.944 159.165 162.826 185.344 123.557Z' fill='%230E4896'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M387.22 32.4473L434.647 103.588L422.166 111.908L374.739 40.7677L387.22 32.4473ZM369.435 44.3044L416.863 115.444L404.382 123.765L356.954 52.6249L369.435 44.3044ZM351.65 56.161L399.077 127.301L386.596 135.621L339.169 64.4815L351.65 56.161ZM126.372 206.346L173.799 277.486L161.318 285.807L113.891 214.666L126.372 206.346ZM108.587 218.203L156.013 289.343L143.533 297.663L96.1058 226.523L108.587 218.203ZM90.8025 230.059L138.229 301.2L125.749 309.52L78.3218 238.38L90.8025 230.059Z' fill='black'/%3E%3Cpath d='M117.192 263.845L134.977 251.989L117.192 263.845ZM357.266 103.796L378.039 89.947L357.266 103.796ZM395.824 78.0905L413.61 66.2339L395.824 78.0905Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M417.076 71.4342L399.291 83.2908L392.358 72.8901L410.143 61.0335L417.076 71.4342ZM381.506 95.1473L360.733 108.996L353.799 98.5954L374.572 84.7467L381.506 95.1473ZM138.444 257.19L120.659 269.046L113.725 258.645L131.51 246.789L138.444 257.19Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_301_867'%3E%3Crect width='513' height='342' fill='white' transform='translate(0 -0.00585938)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A" alt="img" />`,
  ja: `<img src="data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 513 342' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_301_933)'%3E%3Cpath d='M0 -0.00927734H513V341.994H0V-0.00927734Z' fill='white'/%3E%3Cpath d='M256.5 267.174C309.623 267.174 352.688 224.11 352.688 170.987C352.688 117.864 309.623 74.7993 256.5 74.7993C203.377 74.7993 160.312 117.864 160.312 170.987C160.312 224.11 203.377 267.174 256.5 267.174Z' fill='%23D80027'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_301_933'%3E%3Crect width='513' height='342' fill='white' transform='translate(0 -0.00732422)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A" alt="img" />`,
}

export default function LocaleSwitcher() {
  const { i18n } = useTranslation();

  return (
     <>
      <div className="absolute top-[3px] lg:top-[5px] right-16 lg:right-2 md:right-2">
       <TopNavBarWrapper>
        <div className="flex gap-20">
        <DropdownMenu>
        <DropdownMenuTrigger asChild>
        <button className="group border-0 bg-transparents outline-0 focus:outline-0">
          <i className="fa fa-globe text-muted/40"/>
          <span className="fa fa-layers-counter rounded-lg place-content-center" style={{ fontFamily: "Nanum Gothic !important", fontSize: ".6rem", color: "white", background: "rgb(115 115 115 / 0.4)"}}>3</span>
          <span className="sr-only">Toggle languge icon menu</span>
        </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent 
          align="end" 
          className="text-white dark:text-white bg-neutral-800/90 border-black"
          >
            {Object.entries(supportedLngs).map(([code, name]) => (
                <DropdownMenuItem 
                  key={code}
                  onClick={(e) => {
                  i18n.changeLanguage(code)}}
                >
                
                <span key={name} dangerouslySetInnerHTML={{ __html: countryflagIcons[code] }} className="mr-3" />
                   {name}
                </DropdownMenuItem>
            ))}  
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </TopNavBarWrapper>
    </div>
    </>
  );
}