import type { RosterArtist } from './ArtistSearch';
import type { CreateFlowStage } from './CreateFlow/types';

import ErrorText from '~/src/components/ErrorText';
import { useSelector } from '~/src/store/redux';
import { selectSessionUserId } from '~/src/store/session/selectors';
import { ArtistSearch } from './ArtistSearch';

export const ChooseArtistStage: CreateFlowStage = ({ events }) => {
  const userId = useSelector(selectSessionUserId);

  if (!userId)
    return (
      <ErrorText
        error={{ message: 'Not logged in', status: 403 }}
        centerContent
        coverParent
        size="2rem"
      />
    );

  const handleSelectArtist = ({ id, sourceUrl }: RosterArtist) => {
    events.emit('stageComplete', {
      rosterArtistId: id,
      artistUrl: sourceUrl,
    });
  };

  return <ArtistSearch userId={userId} onSelectArtist={handleSelectArtist} />;
};