1  import { Menu, MenuItem } from '@szhsin/react-menu';
 2  import { useState } from 'preact/hooks';
 3  import { useSnapshot } from 'valtio';
 4  
 5  import getTranslateTargetLanguage from '../utils/get-translate-target-language';
 6  import localeMatch from '../utils/locale-match';
 7  import states from '../utils/states';
 8  
 9  import Icon from './icon';
10  import TranslationBlock from './translation-block';
11  
12  export default function MediaAltModal({ alt, lang, onClose }) {
13    const snapStates = useSnapshot(states);
14    const [forceTranslate, setForceTranslate] = useState(false);
15    const targetLanguage = getTranslateTargetLanguage(true);
16    const contentTranslationHideLanguages =
17      snapStates.settings.contentTranslationHideLanguages || [];
18    const differentLanguage =
19      !!lang &&
20      lang !== targetLanguage &&
21      !localeMatch([lang], [targetLanguage]) &&
22      !contentTranslationHideLanguages.find(
23        (l) => lang === l || localeMatch([lang], [l]),
24      );
25  
26    return (
27      <div class="sheet">
28        {!!onClose && (
29          <button type="button" class="sheet-close outer" onClick={onClose}>
30            <Icon icon="x" />
31          </button>
32        )}
33        <header class="header-grid">
34          <h2>Media description</h2>
35          <div class="header-side">
36            <Menu
37              align="end"
38              menuButton={
39                <button type="button" class="plain4">
40                  <Icon icon="more" alt="More" size="xl" />
41                </button>
42              }
43            >
44              <MenuItem
45                disabled={forceTranslate}
46                onClick={() => {
47                  setForceTranslate(true);
48                }}
49              >
50                <Icon icon="translate" />
51                <span>Translate</span>
52              </MenuItem>
53            </Menu>
54          </div>
55        </header>
56        <main lang={lang} dir="auto">
57          <p
58            style={{
59              whiteSpace: 'pre-wrap',
60            }}
61          >
62            {alt}
63          </p>
64          {(differentLanguage || forceTranslate) && (
65            <TranslationBlock
66              forceTranslate={forceTranslate}
67              sourceLanguage={lang}
68              text={alt}
69            />
70          )}
71        </main>
72      </div>
73    );
74  }