import React from 'react';

import { getTranslations } from 'next-intl/server';
import { headers } from 'next/headers';

import { preload } from 'react-dom';

import HomepageHeroVideoClient from '@/components/home/blocks/HomepageHeroVideoClient';
import { getHeroVideoSelection } from '@/utils/heroVideoRotation';

interface HomepageHeroVideoProps {
  locale: string;
}

const HomepageHeroVideo: React.FC<HomepageHeroVideoProps> = async ({ locale }) => {
  const tHome = await getTranslations('home');

  const heroTextSizeConfig = {
    line1: 'text-[40px] sm:text-[60px] lg:text-[100px]',
    line2: 'text-[12px] sm:text-[18px] lg:text-[30px]',
    line3: 'text-[24px] sm:text-[35px] lg:text-[59px]',
    line4: 'text-[25px] sm:text-[38px] lg:text-[63px]',
    line5: 'text-[15px] sm:text-[22px] lg:text-[37px]',
  };

  const heroTextSizeConfigEn = {
    line1: 'text-[22px] sm:text-[33px] lg:text-[55px]',
    line2: 'text-[12px] sm:text-[18px] lg:text-[30px]',
    line3: 'text-[12.5px] sm:text-[19px] lg:text-[31px]',
    line4: 'text-[17px] sm:text-[26px] lg:text-[43px]',
    line5: 'text-[52px] sm:text-[79px] lg:text-[135px]',
  };

  const localizedConfig = locale === 'hu' ? heroTextSizeConfig : heroTextSizeConfigEn;
  const { video } = getHeroVideoSelection(locale);

  const headersList = await headers();
  const userAgent = headersList.get('user-agent') || '';
  const initialIsMobile = /android|iphone|ipad|ipod|mobile|windows phone/i.test(userAgent);

  preload(video.posterDesktop, {
    as: 'image',
    fetchPriority: 'high',
    media: '(min-width: 1024px)',
  });
  preload(video.posterMobile, {
    as: 'image',
    fetchPriority: 'high',
    media: '(max-width: 1023px)',
  });
  preload(video.desktop, {
    as: 'video',
    fetchPriority: 'high',
    media: '(min-width: 1024px)',
  });
  preload(video.mobile, {
    as: 'video',
    fetchPriority: 'high',
    media: '(max-width: 1023px)',
  });

  const titleLines = {
    line1: tHome('hero.titleLines.line1'),
    line2: tHome('hero.titleLines.line2'),
    line3: tHome('hero.titleLines.line3'),
    line4: tHome('hero.titleLines.line4'),
    line5: tHome('hero.titleLines.line5'),
  };

  const cta = {
    chooseCreator: tHome('hero.cta.chooseCreator'),
    chooseCreation: tHome('hero.cta.chooseCreation'),
  };

  return (
    <HomepageHeroVideoClient
      video={video}
      localizedConfig={localizedConfig}
      titleLines={titleLines}
      cta={cta}
      initialIsMobile={initialIsMobile}
    />
  );
};

export default HomepageHeroVideo;