import React from 'react';

import HookMetadata, {
  HookMetadataProps,
} from '@/components/hooksPlayer/HookMetadata';
import HookSongBar, {
  HookSongBarProps,
} from '@/components/hooksPlayer/HookSongBar';

export type HookMetadataWithSongBarProps = Pick<
  HookMetadataProps,
  | 'hookId'
  | 'handle'
  | 'displayName'
  | 'avatarImageUrl'
  | 'title'
  | 'caption'
  | 'clipId'
  | 'recommendationItemId'
  | 'currentUserHandle'
  | 'isRemix'
  | 'isPlaying'
  | 'isFollowingCreator'
  | 'onCreatorClick'
  | 'onFollow'
> &
  Pick<
    HookSongBarProps,
    | 'hookId'
    | 'clipId'
    | 'clipTitle'
    | 'clipHandle'
    | 'clipDisplayName'
    | 'clipImageUrl'
    | 'clipPlayCount'
    | 'recommendationItemId'
    | 'currentUserHandle'
    | 'isFollowingCreator'
    | 'isRemixDisabled'
    | 'isPlaying'
    | 'onAddToPlaylist'
    | 'onSongArtistClick'
    | 'onSongThumbnailClick'
    | 'onSongTitleClick'
    | 'onRemix'
  >;

export type Props = Omit<
  React.HTMLAttributes<HTMLDivElement>,
  keyof HookMetadataWithSongBarProps
> &
  HookMetadataWithSongBarProps;

const HookMetadataWithSongBar: React.FC<Props> = React.memo((props) => {
  const {
    hookId,
    clipId,
    recommendationItemId,
    handle,
    displayName,
    avatarImageUrl,
    title,
    caption,
    currentUserHandle,
    isRemix,
    isPlaying,
    clipTitle,
    clipHandle,
    clipDisplayName,
    clipImageUrl,
    clipPlayCount,
    isFollowingCreator,
    isRemixDisabled,
    onCreatorClick,
    onFollow,
    onAddToPlaylist,
    onSongArtistClick,
    onSongThumbnailClick,
    onSongTitleClick,
    onRemix,
    ...restProps
  } = props;

  return (
    <div {...restProps}>
      <HookMetadata
        hookId={hookId}
        handle={handle}
        displayName={displayName}
        avatarImageUrl={avatarImageUrl}
        title={title}
        caption={caption}
        clipId={clipId}
        recommendationItemId={recommendationItemId}
        currentUserHandle={currentUserHandle}
        isRemix={isRemix}
        isPlaying={isPlaying}
        isFollowingCreator={isFollowingCreator}
        onCreatorClick={onCreatorClick}
        onFollow={onFollow}
      />
      <HookSongBar
        className='-mx-2'
        hookId={hookId}
        clipId={clipId}
        clipTitle={clipTitle}
        clipHandle={clipHandle}
        clipDisplayName={clipDisplayName}
        clipImageUrl={clipImageUrl}
        clipPlayCount={clipPlayCount}
        recommendationItemId={recommendationItemId}
        currentUserHandle={currentUserHandle}
        isFollowingCreator={isFollowingCreator}
        isRemixDisabled={isRemixDisabled}
        isPlaying={isPlaying}
        onAddToPlaylist={onAddToPlaylist}
        onSongArtistClick={onSongArtistClick}
        onSongThumbnailClick={onSongThumbnailClick}
        onSongTitleClick={onSongTitleClick}
        onRemix={onRemix}
      />
    </div>
  );
});
HookMetadataWithSongBar.displayName = 'HookMetadataWithSongBar';

export default HookMetadataWithSongBar;