import { useCallback, useMemo } from 'react';
import storageAvailable from 'storage-available';

import { ChangelogItem, useCMSData } from './datoClient';

type ChangelogItemsReturn = [
  items: ChangelogItem[],
  unviewedItems: ChangelogItem[],
  updateViewed: (date?: Date) => void,
] & {
  items: ChangelogItem[];
  unviewedItems: ChangelogItem[];
  updateLastViewed: (date?: Date) => void;
};

export const CHANGELOG_LAST_VIEWED_COOKIE_NAME = 'changelog_last_viewed_at';

function useChangelogItems() {
  const { data } = useCMSData();

  const localStorageAvailable = storageAvailable('localStorage');
  const changelogLastViewedAt = localStorageAvailable
    ? localStorage.getItem(CHANGELOG_LAST_VIEWED_COOKIE_NAME) || null
    : null;

  const changelogItems = useMemo(
    () => data?.allChangelogItems ?? [],
    [data?.allChangelogItems]
  );
  const unviewedChangelogItems = useMemo(() => {
    return changelogLastViewedAt
      ? changelogItems.filter(
          (item) => new Date(item.datetime) > new Date(changelogLastViewedAt)
        )
      : changelogItems;
  }, [changelogLastViewedAt, changelogItems]);

  const updateChangelogLastViewed = useCallback(
    (date = new Date()) => {
      if (localStorageAvailable) {
        localStorage.setItem(
          CHANGELOG_LAST_VIEWED_COOKIE_NAME,
          date.toUTCString()
        );
      }
    },
    [localStorageAvailable]
  );

  const result = [
    changelogItems,
    unviewedChangelogItems,
    updateChangelogLastViewed,
  ] as ChangelogItemsReturn;

  result.items = changelogItems;
  result.unviewedItems = unviewedChangelogItems;
  result.updateLastViewed = updateChangelogLastViewed;

  return result;
}

export default useChangelogItems;