AniX/app/components/SettingsModal/SettingsModal.tsx

"use client";

import { CURRENT_APP_VERSION } from "#/api/config";
import { usePreferencesStore } from "#/store/preferences";
import {
  Modal,
  Button,
  useThemeMode,
  ToggleSwitch,
  HR,
  Dropdown,
} from "flowbite-react";
import Link from "next/link";

const HomeCategory = {
  last: "Последние релизы",
  finished: "Завершенные релизы",
  ongoing: "Выходит",
  announce: "Анонсированные релизы",
  films: "Фильмы",
};

const BookmarksCategory = {
  watching: "Смотрю",
  planned: "В планах",
  watched: "Просмотрено",
  delayed: "Отложено",
  abandoned: "Заброшено",
};

const NavbarTitles = {
  always: "Всегда",
  links: "Только ссылки",
  selected: "Только выбранные",
  never: "Никогда",
}

export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
  const preferenceStore = usePreferencesStore();

  const { computedMode, setMode } = useThemeMode();

  return (
    <Modal
      dismissible
      show={props.isOpen}
      onClose={() => props.setIsOpen(false)}
    >
      <Modal.Header>Настройки</Modal.Header>
      <Modal.Body>
        <div className="space-y-6">
          <div className="flex items-center gap-2">
            <span className="w-6 h-6 iconify material-symbols--palette-outline"></span>
            <p className="text-lg font-bold dark:text-white">Интерфейс</p>
          </div>
          <div className="flex items-center justify-between">
            <p className=" dark:text-white">Тема</p>
            <Button.Group>
              <Button
                color={computedMode == "light" ? "blue" : "gray"}
                onClick={() => setMode("light")}
              >
                Светлая
              </Button>
              <Button
                color={computedMode == "dark" ? "blue" : "gray"}
                onClick={() => setMode("dark")}
              >
                Темная
              </Button>
            </Button.Group>
          </div>
          <div className="flex items-center justify-between">
            <p className=" dark:text-white max-w-96">
              Пропускать страницу выбора категорий на страницах Домашняя и
              Закладки
            </p>
            <ToggleSwitch
              color="blue"
              theme={{
                toggle: {
                  checked: {
                    color: {
                      blue: "border-blue-700 bg-blue-700",
                    },
                  },
                },
              }}
              onChange={() =>
                preferenceStore.setParams({
                  skipToCategory: {
                    ...preferenceStore.params.skipToCategory,
                    enabled: !preferenceStore.params.skipToCategory.enabled,
                  },
                })
              }
              checked={preferenceStore.params.skipToCategory.enabled}
            />
          </div>
          {preferenceStore.params.skipToCategory.enabled ?
            <>
              <div className="flex items-center justify-between">
                <p className=" dark:text-white max-w-96">
                  Категория домашней страницы
                </p>
                <Dropdown
                  color="blue"
                  label={
                    HomeCategory[
                      preferenceStore.params.skipToCategory.homeCategory
                    ]
                  }
                >
                  {Object.keys(HomeCategory).map((key) => {
                    return (
                      <Dropdown.Item
                        key={key}
                        onClick={() =>
                          preferenceStore.setParams({
                            skipToCategory: {
                              ...preferenceStore.params.skipToCategory,
                              homeCategory: key,
                            },
                          })
                        }
                      >
                        {HomeCategory[key]}
                      </Dropdown.Item>
                    );
                  })}
                </Dropdown>
              </div>
              <div className="flex items-center justify-between">
                <p className=" dark:text-white max-w-96">
                  Категория страницы закладок
                </p>
                <Dropdown
                  color="blue"
                  label={
                    BookmarksCategory[
                      preferenceStore.params.skipToCategory.bookmarksCategory
                    ]
                  }
                >
                  {Object.keys(BookmarksCategory).map((key) => {
                    return (
                      <Dropdown.Item
                        key={key}
                        onClick={() =>
                          preferenceStore.setParams({
                            skipToCategory: {
                              ...preferenceStore.params.skipToCategory,
                              bookmarksCategory: key,
                            },
                          })
                        }
                      >
                        {BookmarksCategory[key]}
                      </Dropdown.Item>
                    );
                  })}
                </Dropdown>
              </div>
            </>
          : ""}
          <div className="flex items-center justify-between">
            <p className=" dark:text-white max-w-96">
              Показывать название пункта в навигации
            </p>
            <Dropdown
              color="blue"
              label={
                NavbarTitles[preferenceStore.flags.showNavbarTitles]
              }
            >
              {Object.keys(NavbarTitles).map((key: "always" | "links" | "selected" | "never") => {
                return (
                  <Dropdown.Item
                    key={`navbar-titles-${key}`}
                    onClick={() =>
                      preferenceStore.setFlags({
                        showNavbarTitles: key,
                      })
                    }
                  >
                    {NavbarTitles[key]}
                  </Dropdown.Item>
                );
              })}
            </Dropdown>
          </div>
          <HR className="my-4 dark:bg-slate-400" />
          <div className="flex items-center gap-2">
            <span className="w-6 h-6 iconify material-symbols--settings-outline"></span>
            <p className="text-lg font-bold dark:text-white">Приложение</p>
          </div>
          <div className="flex items-center justify-between">
            <p className=" dark:text-white">Показывать список изменений</p>
            <ToggleSwitch
              color="blue"
              theme={{
                toggle: {
                  checked: {
                    color: {
                      blue: "border-blue-700 bg-blue-700",
                    },
                  },
                },
              }}
              onChange={() =>
                preferenceStore.setFlags({
                  showChangelog: !preferenceStore.flags.showChangelog,
                })
              }
              checked={preferenceStore.flags.showChangelog}
            />
          </div>
          <div className="flex items-center justify-between">
            <div>
              <p className=" dark:text-white">Отправка аналитики</p>
              <p className="text-gray-500 dark:text-gray-300">
                Требуется перезагрузка для применения
              </p>
            </div>
            <ToggleSwitch
              color="blue"
              theme={{
                toggle: {
                  checked: {
                    color: {
                      blue: "border-blue-700 bg-blue-700",
                    },
                  },
                },
              }}
              onChange={() =>
                preferenceStore.setFlags({
                  enableAnalytics: !preferenceStore.flags.enableAnalytics,
                })
              }
              checked={preferenceStore.flags.enableAnalytics}
            />
          </div>
          <HR className="my-4 dark:bg-slate-400" />
          <div className="flex items-center gap-2">
            <span className="w-6 h-6 iconify material-symbols--experiment-outline"></span>
            <p className="text-lg font-bold dark:text-white">Эксперименты</p>
          </div>
          <div className="flex items-center justify-between">
            <div>
              <p className=" dark:text-white">Новый плеер</p>
              <p className="text-gray-500 dark:text-gray-300">
                Поддерживаемые источники: Kodik, Sibnet, Libria
              </p>
            </div>
            <ToggleSwitch
              color="blue"
              theme={{
                toggle: {
                  checked: {
                    color: {
                      blue: "border-blue-700 bg-blue-700",
                    },
                  },
                },
              }}
              onChange={() =>
                preferenceStore.setParams({
                  experimental: {
                    ...preferenceStore.params.experimental,
                    newPlayer: !preferenceStore.params.experimental.newPlayer,
                  },
                })
              }
              checked={preferenceStore.params.experimental.newPlayer}
            />
          </div>
        </div>
        <HR className="my-4 dark:bg-slate-400" />
        <div>
          <Link
            href={"/about"}
            className="flex items-center gap-2 p-2 text-left rounded-md hover:bg-gray-100 dark:hover:bg-gray-900"
            onClick={() => props.setIsOpen(false)}
          >
            <span className="w-8 h-8 iconify material-symbols--info"></span>
            <div>
              <p>О приложении</p>
              <p className="text-sm text-gray-400 dark:text-gray-200">
                v{CURRENT_APP_VERSION}
              </p>
            </div>
          </Link>
        </div>
      </Modal.Body>
    </Modal>
  );
};