import { useEffect } from 'react';

import type { State } from '~/src/store/types';

import { selectPrereleaseGlobal } from '~/src/store/prereleases';
import { fetchPrereleaseAction } from '~/src/store/prereleases/actions/fetch';
import { useDispatch, useSelector } from '~/src/store/redux';
import DashboardItemPage from './DashboardItemPage';
import CellContainer from './DashboardItemPage/CellContainer';
import CountriesChart from './DashboardItemPage/CountriesChart';
import OpenEventsChart from './DashboardItemPage/OpenEventsChart';
import PresaveEventsChart from './DashboardItemPage/PresaveEventsChart';
import SessionsByReferrer from './DashboardItemPage/TrafficSourcesChart';
import UnlocksChart from './DashboardItemPage/UnlocksChart';
import { getAnalyticsRangePresets } from './utils';

const DashboardPrereleasePage = ({
  prereleaseId,
}: {
  prereleaseId: number;
}) => {
  const dispatch = useDispatch();

  const prerelease = useSelector((state: State) =>
    selectPrereleaseGlobal(state, prereleaseId)
  );

  useEffect(() => {
    dispatch(fetchPrereleaseAction({ id: prereleaseId }));
  }, [dispatch, prereleaseId]);

  if (!prerelease) return null;

  return (
    <DashboardItemPage
      item={prerelease}
      rangePresets={getAnalyticsRangePresets(prerelease.createdAtTimestamp)}
      renderContent={({
        openEvents,
        referrers,
        countries,
        presaveEvents,
        unlockEvents,
        items,
      }) => (
        <CellContainer
          items={[
            openEvents.total && (
              <OpenEventsChart key="opens" data={openEvents} />
            ),
            referrers.total && (
              <SessionsByReferrer key="traffic" data={referrers} />
            ),
            countries.total && (
              <CountriesChart key="countries" data={countries} />
            ),
            presaveEvents.total && (
              <PresaveEventsChart
                key="presaves"
                data={presaveEvents}
                totalDays={items.length}
              />
            ),
            unlockEvents.total && (
              <UnlocksChart
                key="unlocks"
                data={unlockEvents}
                totalDays={items.length}
              />
            ),
          ]}
        />
      )}
      trackerContext={{
        prereleaseId: prerelease.id,
        prereleaseName: prerelease.name,

        artistId: prerelease.artistId,
        artistName: prerelease.artistName,
      }}
    />
  );
};

export default DashboardPrereleasePage;