From 7f56790d1486f3061a47937541b68c54f39eee8d Mon Sep 17 00:00:00 2001
From: Alina <ruesullivanpro@gmail.com>
Date: Sun, 24 Mar 2024 04:27:30 +0400
Subject: [PATCH] feat: add select dictionary variant feature

---
 src/app/popup/Popup.tsx                       |  2 +
 .../SelectDictionaryVariant/index.ts          |  1 +
 .../ui/SelectDictionaryList.tsx               | 72 +++++++++++++++++++
 .../ui/SelectDictionaryVariant.tsx            | 14 +++-
 .../SelectDictionaryVariant/ui/index.ts       |  1 +
 .../ui/styles.module.scss                     |  6 ++
 6 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 src/features/dictionary/SelectDictionaryVariant/index.ts
 create mode 100644 src/features/dictionary/SelectDictionaryVariant/ui/SelectDictionaryList.tsx
 create mode 100644 src/features/dictionary/SelectDictionaryVariant/ui/index.ts

diff --git a/src/app/popup/Popup.tsx b/src/app/popup/Popup.tsx
index a2a2381..7a24ad8 100644
--- a/src/app/popup/Popup.tsx
+++ b/src/app/popup/Popup.tsx
@@ -1,3 +1,4 @@
+import { SelectDictionaryList } from '@features/dictionary/SelectDictionaryVariant'
 import { SelectLanguages } from '@features/language/SelectLanguages'
 
 import { LANGUAGES } from '@entities/language'
@@ -7,6 +8,7 @@ import { Toasts } from '@shared/ui/Toast'
 export const Popup = () => {
   return (
     <main>
+      <SelectDictionaryList />
       <SelectLanguages languages={LANGUAGES} />
       <Toasts />
     </main>
diff --git a/src/features/dictionary/SelectDictionaryVariant/index.ts b/src/features/dictionary/SelectDictionaryVariant/index.ts
new file mode 100644
index 0000000..ed58495
--- /dev/null
+++ b/src/features/dictionary/SelectDictionaryVariant/index.ts
@@ -0,0 +1 @@
+export * from './ui'
diff --git a/src/features/dictionary/SelectDictionaryVariant/ui/SelectDictionaryList.tsx b/src/features/dictionary/SelectDictionaryVariant/ui/SelectDictionaryList.tsx
new file mode 100644
index 0000000..d92ab4d
--- /dev/null
+++ b/src/features/dictionary/SelectDictionaryVariant/ui/SelectDictionaryList.tsx
@@ -0,0 +1,72 @@
+import { useStore } from '@nanostores/preact'
+
+import { NoSelectedLanguages } from '@features/language/SelectLanguages'
+
+import { DictionaryCard, dictionaryStore } from '@entities/dictionary'
+import { languageStore } from '@entities/language'
+
+import { Tab, TabPanel, Tabs, TabsList, a11yProps } from '@shared/ui/Tabs'
+
+import { SelectDictionaryVariant } from './SelectDictionaryVariant'
+import styles from './styles.module.scss'
+
+export const SelectDictionaryList = () => {
+  const dictionaries = useStore(dictionaryStore.$dictionaries)
+  const languages = useStore(languageStore.$languages)
+
+  return (
+    <>
+      {languages.length ? (
+        <>
+          <Tabs>
+            <TabsList arrows={true}>
+              {languages.map((language) => (
+                <Tab
+                  value={language.value}
+                  {...a11yProps('language_navigation', language.value)}
+                >
+                  {language.label}
+                </Tab>
+              ))}
+            </TabsList>
+            {languages.map((language) => {
+              return (
+                <TabPanel
+                  {...a11yProps('language_navigation', language.value)}
+                  value={language.value}
+                >
+                  <ul className={styles.dictionaries}>
+                    {dictionaries[language.value].dictionaries.map(
+                      (dictionary) => {
+                        if ('variants' in dictionary) {
+                          return (
+                            <li>
+                              <SelectDictionaryVariant
+                                key={dictionary.id}
+                                dictionary={dictionary}
+                              />
+                            </li>
+                          )
+                        } else {
+                          return (
+                            <DictionaryCard
+                              key={dictionary.id}
+                              url={dictionary.url}
+                              name={dictionary.name}
+                            />
+                          )
+                        }
+                      },
+                    )}
+                  </ul>
+                </TabPanel>
+              )
+            })}
+          </Tabs>
+        </>
+      ) : (
+        <NoSelectedLanguages />
+      )}
+    </>
+  )
+}
diff --git a/src/features/dictionary/SelectDictionaryVariant/ui/SelectDictionaryVariant.tsx b/src/features/dictionary/SelectDictionaryVariant/ui/SelectDictionaryVariant.tsx
index ad533b2..8503060 100644
--- a/src/features/dictionary/SelectDictionaryVariant/ui/SelectDictionaryVariant.tsx
+++ b/src/features/dictionary/SelectDictionaryVariant/ui/SelectDictionaryVariant.tsx
@@ -1,4 +1,8 @@
-import { DictionaryCard, IDictionaryWithVariants } from '@entities/dictionary'
+import {
+  DictionaryCard,
+  IDictionaryWithVariants,
+  dictionaryStore,
+} from '@entities/dictionary'
 
 import { Button } from '@shared/ui/Button'
 
@@ -21,7 +25,13 @@ export const SelectDictionaryVariant = ({ dictionary }: GroupProps) => {
             actions={
               <Button
                 disabled={isActive}
-                onClick={() => console.log('select variant')}
+                onClick={() =>
+                  dictionaryStore.selectVariant(
+                    'en',
+                    dictionary.id,
+                    variant.value,
+                  )
+                }
               >
                 {isActive
                   ? `${variant.label} version is used`
diff --git a/src/features/dictionary/SelectDictionaryVariant/ui/index.ts b/src/features/dictionary/SelectDictionaryVariant/ui/index.ts
new file mode 100644
index 0000000..ce345d1
--- /dev/null
+++ b/src/features/dictionary/SelectDictionaryVariant/ui/index.ts
@@ -0,0 +1 @@
+export { SelectDictionaryList } from './SelectDictionaryList'
diff --git a/src/features/dictionary/SelectDictionaryVariant/ui/styles.module.scss b/src/features/dictionary/SelectDictionaryVariant/ui/styles.module.scss
index 51ece4e..148e70b 100644
--- a/src/features/dictionary/SelectDictionaryVariant/ui/styles.module.scss
+++ b/src/features/dictionary/SelectDictionaryVariant/ui/styles.module.scss
@@ -1,3 +1,9 @@
+.dictionaries {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
 .variants {
   display: grid;
   grid-template-columns: 1fr 1fr;