import type { NextPage, GetServerSideProps } from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { Fragment } from 'react';
import { useTranslation } from 'next-i18next';
import Header from '@/components/templates/layout/header';
import Footer from '@/components/templates/layout/Footer';
import Newsletter from '@/components/templates/layout/Newsletter';

import TitleBanner from '@/components/templates/blogs/TitleBanner';
import BlogContent from '@/components/templates/blogs/BlogContent';
import FigureImage from '@/components/atoms/FigureImage';
import ArticlesCarousel from '@/components/templates/blogs/ArticlesCarousel';
import { getBlog, getBlogsPreview, getOtherBlogs } from '@/data/blogs';
import Head from 'next/head';
import OtherBlogs from '@/components/templates/blogs/OtherBlogs';
import { getCities } from '@/data/cities';

type PageProps = { otherBlogs?: any[]; blog?: any; cities: any; locale?: string };
const Page: NextPage<PageProps> = ({ otherBlogs, blog, cities, locale }) => {
  const { t } = useTranslation('common');

  return (
    <Fragment>
      <Head>
        <title>{blog.metaTitle}</title>
        <meta name="description" content={blog.metaDescription} />
        <meta name="keywords" content={blog.metaDescription} />
      </Head>
      <Header categories={cities} slug={blog?.localizations[0]?.slug || blog?.slug} />
      <TitleBanner
        categoryLink={blog?.category?.url}
        categoryTitle={blog?.category?.name}
        title={blog?.title}
        date={blog?.date}
      />
      <section className="wrapper bg-light">
        <div className="container pb-8 ">
          <div className="row">
            <div className="col-lg-10 mx-auto">
              <div className="blog single mt-n17">
                <div className="card">
                  {(blog?.banner && (
                    <FigureImage
                      width={blog?.banner?.width}
                      height={blog?.banner?.height}
                      src={blog?.banner?.url}
                      className="card-img-top  "
                      classNameImage="tw-aspect-[5/3] tw-object-cover"
                      alt={blog?.title}
                    />
                  )) ||
                    ''}

                  <div className="card-body">
                    <BlogContent
                      topTitle={blog?.topTitle}
                      topContent={blog?.topContent}
                      middleContent={blog?.middleContent}
                      blockQuote={blog?.blockQuote}
                      lastTitle={blog?.lastTitle}
                      lastContent={blog?.lastContent}
                      tags={blog?.blogTags}
                      galleryImages={blog?.galleryImages}
                    />
                    <hr className="tw-text-light-gray" />
                    {(otherBlogs && Array?.isArray(otherBlogs) && otherBlogs?.length && (
                      <>
                        <h3 className="mt-6  tw-font-inter tw-text-2xl md:tw-text-[32px] tw-text-main-dark tw-font-semibold tw-pb-6">
                          {locale === 'es' ? 'Otros artículos' : 'Other articles'}
                        </h3>
                        <OtherBlogs articles={otherBlogs} maxPerView={2} />
                      </>
                    )) ||
                      ''}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <Newsletter />
      <Footer cities={cities} />
    </Fragment>
  );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { locale, query, defaultLocale } = context;
  const { slug } = query;
  const blog: any = await getBlog({ locale, slug });
  const otherBlogs: any = await getOtherBlogs({ locale });
  const cities = await getCities(locale);
  if (!blog) {
    return {
      redirect: {
        destination: locale === defaultLocale ? '/blog' : `/${locale}/blog`, // Puedes redirigir a una página personalizada o de error
        permanent: false
      }
    };
  }
  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'es', ['common', 'routes'])),
      otherBlogs,
      blog,
      cities,
      locale
    }
  };
};

export default Page;
