// to do-think? ha egy kép van akkor több design méretarány függően, ha több kép van akkor galléria fix négyzettel?
// mobilon pedig full-width és magasság adjust hozzá mindig????
'use client';
import React, { useState } from 'react';

import { useTranslations } from 'next-intl';

import ContributeBand from '@/components/common/ContributeBand';
import LanguageNotice from '@/components/common/LanguageNotice';
import ContributeDialog from '@/components/creations/ContributeDialog';
import CreationDetails from '@/components/creations/CreationDetails';
import CreationRecommendations from '@/components/creations/CreationRecommendations';
import { getCreationCreatorDisplayName, getPlaceOfOrigin } from '@/utils/creationHelpers';
import { buildMediaUrl } from '@/utils/images';

import { CreationListItem, CreationPageItem } from '@/types/Creation';

import type { AppLocale } from '@/config/i18n';

interface CreationClientProps {
  creation: CreationPageItem;
  initialRecommendations: CreationListItem[];
  recommendedCreatorIdentifier: string | null;
  locale: AppLocale;
}

const CreationClientWrapper: React.FC<CreationClientProps> = ({
  creation,
  initialRecommendations,
  recommendedCreatorIdentifier,
  locale,
}) => {
  const t = useTranslations('creationPage');
  const creatorDisplayName = getCreationCreatorDisplayName(creation);

  const [contributeOpen, setContributeOpen] = useState(false);

  const schemaCreation = {
    '@context': 'https://schema.org',
    '@type': 'CreativeWork',
    name: creation?.nev,
    creator: creatorDisplayName,
    image: creation?.fokep?.id ? buildMediaUrl(creation.fokep.id, 'w1920') : undefined,
    description: [creatorDisplayName, creation?.nev]
      .filter(Boolean)
      .join(', ')
      .concat(getPlaceOfOrigin(creation?.keletkezesHelyeCity)),
    url: `${process.env.NEXT_PUBLIC_BASE_URL}/alkotas/${creation?.alkotasAzonosito}`,
    inLanguage: 'hu',
    dateCreated: creation?.label,
    locationCreated: creation?.keletkezesHelyeCity,
  };

  console.log('creation', creation);

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaCreation) }}
      />

      {locale === 'en' && creation.nemForditottTartalom && (
        <div className="px-site pt-4">
          <LanguageNotice text={t('languageNote')} />
        </div>
      )}

      <div className="w-full md:gap-8 pb-page">
        {creation && (
          <>
            <CreationDetails creation={creation} />

            <ContributeBand onContribute={() => setContributeOpen(true)} />

            <CreationRecommendations
              creatorIdentifier={recommendedCreatorIdentifier}
              currentCreationId={creation.alkotasAzonosito}
              tags={creation.targyszo ?? []}
              initialCreations={initialRecommendations}
            />
          </>
        )}
      </div>

      <ContributeDialog
        open={contributeOpen}
        onOpenChange={setContributeOpen}
        rowId={creation.alkotasAzonosito}
        messageType="alkotas"
      />
    </>
  );
};

export default CreationClientWrapper;