export const RecentQuery = `query getRecent ($rootId: String!, $language: String!, $pageDisplayCount: Int!) {
  search(
    where: {
      AND: [
        {
          name: "_language",
          value: $language,
          operator: EQ
        },
        {
          name: "_hasLayout",
          value: "true",
          operator: EQ
        },
        {
          name: "_parent",
          value: $rootId,
          operator: CONTAINS
        }
      ]
    }
    orderBy: {
      name: "ReleaseDate"
      direction: DESC
    }
    first: $pageDisplayCount
  ) {
    results {
      id
      Title: field(name: "Title") {
        jsonValue
      }
      Thumbnail: field(name: "Thumbnail") {
        ...on ImageField {
          jsonValue
        }
      }
      Overview: field(name: "Overview") {
        jsonValue
      }
      ReleaseDate: field(name: "ReleaseDate") {
        ...on DateField {
          jsonValue
        }
      }
      url {
        path
      }
    }
  }
}`;

import {
  useSitecoreContext,
  Text,
  TextField,
  Link as JssLink,
  LinkField,
  Image as JssImage,
  ImageField,
  RichText,
  RichTextField,
  DateField,
  Item,
  GetStaticComponentProps,
} from "@sitecore-jss/sitecore-jss-nextjs";
import { RecentQuery } from "src/graphql/RecentQuery.dynamic.graphql";
import graphqlClientFactory from "lib/graphql-client-factory";
import config from "temp/config";
import Link from "next/link";

interface RcentItemFields {
  Title: { jsonValue: TextField };
  Thumbnail: { jsonValue: ImageField };
  Overview: { jsonValue: RichTextField };
  ReleaseDate: { jsonValue: { value?: string; editable?: string } };
}

type RecentItemProps = {
  id: string;
  fields: RcentItemFields;
  url: string;
};

interface Fields {
  RecentHeader: RichTextField;
  ListLink: LinkField;
}

interface RecentProps {
  params: { [key: string]: string };
  fields: Fields;
  articles: RecentItemProps[];
}

interface RawItemData {
  id: string;
  Title: { jsonValue: TextField };
  Thumbnail: { jsonValue: ImageField };
  Overview: { jsonValue: RichTextField };
  ReleaseDate: { jsonValue: { value?: string; editable?: string } };
  url: {
    path: string;
  };
}

type SearchQueryData = {
  search: {
    results: RawItemData[];
  };
};

type ComponentContentProps = {
  pageState: string | undefined;
  url: string;
  children: JSX.Element;
};

const RecentItem = (props: ComponentContentProps): JSX.Element => {
  return (
    <li className="item">
      {props.pageState !== "edit" ? (
        <Link href={props.url}>{props.children}</Link>
      ) : (
        <>{props.children}</>
      )}
    </li>
  );
};

export const Default = (props: RecentProps): JSX.Element => {
  const { sitecoreContext } = useSitecoreContext();
  const id = props.params.RenderingIdentifier;
  return (
    <div
      className={`component recent ${props.params.styles}`}
      id={id ? id : undefined}
    >
      <div className="component-content">
        <div className="recent-header">
          <RichText field={props.fields.RecentHeader} />
        </div>
        <ul>
          {props.articles &&
            Array.isArray(props.articles) &&
            props.articles.map((item) => (
              <RecentItem
                key={item.id}
                pageState={sitecoreContext.pageState}
                url={item.url}
              >
                <>
                  <div className="item-content-first">
                    <JssImage field={item.fields?.Thumbnail?.jsonValue} />
                  </div>
                  <div className="item-content-second">
                    <div className="item-title">
                      <DateField
                        field={item.fields?.ReleaseDate?.jsonValue}
                        render={(date) => date?.toLocaleDateString()}
                      />{" "}
                      <Text field={item.fields?.Title?.jsonValue} />
                    </div>
                    <div className="item-overview">
                      <RichText field={item.fields?.Overview?.jsonValue} />
                    </div>
                  </div>
                </>
              </RecentItem>
            ))}
        </ul>
        <div className="field-recentlink">
          <JssLink field={props.fields.ListLink} />
        </div>
      </div>
    </div>
  );
};

export const getStaticProps: GetStaticComponentProps = async (
  rendering,
  layoutData
) => {
  try {
    const context = layoutData?.sitecore?.context;
    const route = layoutData?.sitecore?.route;
    const params = rendering?.params;
    const fields = rendering?.fields;

    if (!context || !route || !params || !fields) {
      return { articles: [] as RecentItemProps[] };
    }
    const graphQLClient = graphqlClientFactory();

    const language = context.language ?? config.defaultLanguage;

    const pageDisplayCount = Number(params.PageDisplayCount);
    if (
      pageDisplayCount &&
      Number.isInteger(pageDisplayCount) &&
      pageDisplayCount < 1
    ) {
      return { articles: [] as RecentItemProps[] };
    }

    const rootItem = fields.Root as Item;
    if (!rootItem) {
      return { articles: [] as RecentItemProps[] };
    }
    const rootId = rootItem.id;

    const data = await graphQLClient.request<SearchQueryData>(RecentQuery, {
      rootId,
      language,
      pageDisplayCount,
    });

    const articles: RecentItemProps[] =
      data.search?.results?.map((d) => {
        return {
          id: d.id,
          fields: {
            Title: d.Title,
            Thumbnail: d.Thumbnail,
            Overview: d.Overview,
            ReleaseDate: d.ReleaseDate,
          },
          url: d.url?.path,
        };
      }) ?? [];

    return { articles };
  } catch (e) {
    console.error(e);
    return { articles: [] as RecentItemProps[] };
  }
};