text: /**
   * A React component to view a PDF document
   *
   * @see https://react-pdf-viewer.dev
   * @license https://react-pdf-viewer.dev/license
   * @copyright 2019-2020 Nguyen Huu Phuoc <me@phuoc.ng>
   */
  
  import React, { useContext, useState } from 'react';
  import { Button, LocalizationContext, LocalizationMap, MenuItem, Popover, Position, Toggle, Tooltip } from '@react-pdf-viewer/core';
  
  import LocaleIcon from './LocaleIcon';
  
  export interface LocalePopoverProps {
      initialLocale?: string;
      locales: {
          [locale: string]: string,
      };
      localizations: {
          [locale: string]: LocalizationMap,
      };
      onUpdateLocalization: (localization: LocalizationMap) => void;
  }
  
  const LocalePopover: React.FC<LocalePopoverProps> = ({ initialLocale = 'en_US', locales, localizations, onUpdateLocalization }) => {
      const l10n = useContext(LocalizationContext);
      const [locale, setLocale] = useState(initialLocale);
  
      const renderTarget = (toggle: Toggle, opened: boolean) => {
          const label = l10n && l10n.localeSwitcher
              ? l10n.localeSwitcher.switchLocale
              : 'Switch locale';
  
          return (
              <Tooltip
                  position={Position.BottomCenter}
                  target={<Button onClick={toggle} isSelected={opened}><LocaleIcon /></Button>}
                  content={() => label}
                  offset={{ left: 0, top: 8 }}
              />
          );
      };
  
      const renderContent = (toggle: Toggle) => {
          const changeLocale = (newLocale: string) => {
              setLocale(newLocale);
              onUpdateLocalization(localizations[newLocale] || {});
              toggle();
          };
  
          return (
              <ul
                  style={{
                      listStyleType: 'none',
                      margin: 0,
                      padding: 0,
                  }}
              >
                  {
                      Object.keys(locales).map(loc => {
                          return (
                              <MenuItem
                                  key={loc}
                                  checked={locale === loc}
                                  onClick={() => changeLocale(loc)}
                              >
                                  {locales[loc]}
                              </MenuItem>
                          );
                      })
                  }
              </ul>
          );
      };
  
      return (
          <Popover
              position={Position.BottomRight}
              target={renderTarget}
              content={renderContent}
              offset={{ left: 0, top: 8 }}
              closeOnClickOutside={true}
              closeOnEscape={true}
          />
      );
  };
  
  export default LocalePopover;
  