import {ChannelContentProps} from '@app/channels/channel-content';
import React from 'react';
import {NewsArticle} from '@app/titles/models/news-article';
import {BulletSeparatedItems} from '@app/titles/bullet-separated-items';
import {ChannelHeader} from '@app/channels/channel-header/channel-header';
import {NewsArticleImage} from '@app/news/news-article-image';
import {NewsArticleLink} from '@app/news/news-article-link';
import {FormattedDate} from '@common/i18n/formatted-date';
import {NewsArticleSourceLink} from '@app/news/news-article-source-link';
import {NewsArticleByline} from '@app/news/news-article-byline';
import {useChannelContent} from '@common/channels/requests/use-channel-content';
import {Channel, ChannelContentItem} from '@common/channels/channel';
import {
  PaginationControls,
  PaginationControlsType,
} from '@common/ui/navigation/pagination-controls';

export function ChannelContentNews({
  channel,
  isNested,
}: ChannelContentProps<NewsArticle>) {
  const shouldPaginate = !isNested;
  const query = useChannelContent<ChannelContentItem<NewsArticle>>(
    channel,
    null,
    {
      paginate: shouldPaginate,
    },
  );

  return (
    <div>
      <ChannelHeader channel={channel as Channel} isNested={isNested} />
      {shouldPaginate && (
        <PaginationControls
          pagination={query.data}
          type={channel.config.paginationType as PaginationControlsType}
          className="mb-34"
        />
      )}
      <div className="flex gap-34">
        <div className="w-240 flex-shrink-0">
          {query.data?.data
            .slice(0, 3)
            .map(article => (
              <LeftColArticle
                key={article.id}
                article={article}
                className="mb-14"
              />
            ))}
        </div>
        <div className="flex-auto">
          {query.data?.data.slice(3, 12).map(article => (
            <div key={article.id} className="mb-12 flex items-center gap-14">
              <NewsArticleImage article={article} size="w-84 h-84" />
              <div className="flex-auto">
                <NewsArticleLink article={article} className="font-semibold" />
                <BulletSeparatedItems className="text-sm">
                  <FormattedDate date={article.created_at} />
                  <NewsArticleByline article={article} />
                  <NewsArticleSourceLink article={article} />
                </BulletSeparatedItems>
              </div>
            </div>
          ))}
        </div>
      </div>
      {shouldPaginate && (
        <PaginationControls
          pagination={query.data}
          type={channel.config.paginationType as PaginationControlsType}
          className="mt-34"
          scrollToTop
        />
      )}
    </div>
  );
}

interface LeftColArticleProps {
  article: NewsArticle;
  className?: string;
}
function LeftColArticle({article, className}: LeftColArticleProps) {
  return (
    <div className={className}>
      <NewsArticleImage article={article} size="aspect-video w-full" />
      <NewsArticleLink
        article={article}
        className="mt-10 block text-sm font-semibold"
      />
      <div className="mt-8 text-xs text-muted">
        <NewsArticleByline article={article} />
        <NewsArticleSourceLink article={article} className="mt-4" />
      </div>
    </div>
  );
}