gooseek/services/web-svc/src/components/EmptyChat.tsx

'use client';

import { useEffect, useState } from 'react';
import EmptyChatMessageInput from './EmptyChatMessageInput';
import WeatherWidget from './WeatherWidget';
import NewsArticleWidget from './NewsArticleWidget';
import SettingsButtonMobile from '@/components/Settings/SettingsButtonMobile';
import {
  getShowNewsWidget,
  getShowWeatherWidget,
} from '@/lib/config/clientRegistry';
import { useTranslation } from '@/lib/localization/context';

const EmptyChat = () => {
  const { t } = useTranslation();
  const [showWeather, setShowWeather] = useState(() =>
    typeof window !== 'undefined' ? getShowWeatherWidget() : true,
  );
  const [showNews, setShowNews] = useState(() =>
    typeof window !== 'undefined' ? getShowNewsWidget() : true,
  );

  useEffect(() => {
    const updateWidgetVisibility = () => {
      setShowWeather(getShowWeatherWidget());
      setShowNews(getShowNewsWidget());
    };

    updateWidgetVisibility();

    window.addEventListener('client-config-changed', updateWidgetVisibility);
    window.addEventListener('storage', updateWidgetVisibility);

    return () => {
      window.removeEventListener(
        'client-config-changed',
        updateWidgetVisibility,
      );
      window.removeEventListener('storage', updateWidgetVisibility);
    };
  }, []);

  return (
    <div className="relative">
      <div className="absolute w-full flex flex-row items-center justify-end mr-5 mt-5">
        <SettingsButtonMobile />
      </div>
      <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-4">
        <div className="flex flex-col items-center justify-center w-full space-y-6">
          <div className="flex flex-row items-center justify-center -mt-8 mb-2">
            <img
              src={`/logo.svg?v=${process.env.NEXT_PUBLIC_VERSION ?? '1'}`}
              alt="GooSeek"
              className="h-12 sm:h-14 w-auto select-none"
            />
          </div>
          <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium">
            {t('empty.subtitle')}
          </h2>
          {(showWeather || showNews) && (
            <div className="flex flex-row flex-wrap w-full gap-2 sm:gap-3 justify-center items-stretch">
              {showWeather && (
                <div className="flex-1 min-w-[120px] shrink-0">
                  <WeatherWidget />
                </div>
              )}
              {showNews && (
                <div className="flex-1 min-w-[120px] shrink-0">
                  <NewsArticleWidget />
                </div>
              )}
            </div>
          )}
          <EmptyChatMessageInput />
        </div>
      </div>
    </div>
  );
};

export default EmptyChat;