import { ItemTypes } from '@theorchard/songwhip-api';

import type { PageSectionComponent } from '../../types';
import type { PageTitleSectionProps } from '../types';

import useSelectArtists from '~/src/hooks/useSelectArtists';
import { EditWrapper } from '../../lib/EditWrapper';
import { PageTitleSection } from '../PageTitleSection';
import { Settings } from './Settings';

export const PageTitleSectionEdit: PageSectionComponent<
  PageTitleSectionProps
> = (props) => {
  const {
    sectionPath,
    layoutData: { item },

    customArtistNames,
    withArtistLinks = false,
    isArtistNamesHidden = false,
  } = props;

  const artistIds = item.type === ItemTypes.ARTIST ? [item.id] : item.artistIds;
  const artists = useSelectArtists(artistIds);
  const artistNames = artists?.map(({ name }) => name).join(', ') ?? '';

  return (
    <div data-testid="pageTitleSectionEdit">
      <EditWrapper
        sectionPath={sectionPath}
        padding="6rem 0 2rem"
        renderSettingsContent={({ close }) => (
          <Settings
            sectionPath={sectionPath}
            artistsContext={{ artistIds, artistNames }}
            onSubmit={close}
            customArtistNames={customArtistNames}
            withArtistLinks={withArtistLinks}
            isArtistNamesHidden={isArtistNamesHidden}
          />
        )}
      >
        <PageTitleSection {...props} />
      </EditWrapper>
    </div>
  );
};