import {Artist} from '@app/web-player/artists/artist';
import {Album} from '@app/web-player/albums/album';
import {Track} from '@app/web-player/tracks/track';
import {Dialog} from '@ui/overlays/dialog/dialog';
import {DialogHeader} from '@ui/overlays/dialog/dialog-header';
import {Trans} from '@ui/i18n/trans';
import {DialogBody} from '@ui/overlays/dialog/dialog-body';
import {Tabs} from '@ui/tabs/tabs';
import {TabList} from '@ui/tabs/tab-list';
import {Tab} from '@ui/tabs/tab';
import {TabPanel, TabPanels} from '@ui/tabs/tab-panels';
import {SmallArtistImage} from '@app/web-player/artists/artist-image/small-artist-image';
import {AlbumImage} from '@app/web-player/albums/album-image/album-image';
import {TrackImage} from '@app/web-player/tracks/track-image/track-image';
import {TextField} from '@ui/forms/input-field/text-field/text-field';
import {getArtistLink} from '@app/web-player/artists/artist-link';
import {getAlbumLink} from '@app/web-player/albums/album-link';
import {getTrackLink} from '@app/web-player/tracks/track-link';
import {Button} from '@ui/buttons/button';
import {useRef} from 'react';
import useCopyClipboard from 'react-use-clipboard';
import {ShareMediaButtons} from '@app/web-player/sharing/share-media-buttons';
import {DialogFooter} from '@ui/overlays/dialog/dialog-footer';
import {useDialogContext} from '@ui/overlays/dialog/dialog-context';
import {useIsMobileMediaQuery} from '@ui/utils/hooks/is-mobile-media-query';
import {Playlist} from '@app/web-player/playlists/playlist';
import {PlaylistImage} from '@app/web-player/playlists/playlist-image';
import {getPlaylistLink} from '@app/web-player/playlists/playlist-link';

interface Props {
  item: Artist | Album | Track | Playlist;
}
export function ShareMediaDialog({item}: Props) {
  const {close} = useDialogContext();
  return (
    <Dialog size="xl">
      <DialogHeader>
        <Trans message="Share :name" values={{name: item.name}} />
      </DialogHeader>
      <DialogBody>
        {item.model_type === 'artist' || item.model_type === 'playlist' ? (
          <SharePanel item={item} />
        ) : (
          <Tabs>
            <TabList>
              <Tab>
                <Trans message="Share" />
              </Tab>
              <Tab>
                <Trans message="Embed" />
              </Tab>
            </TabList>
            <TabPanels className="pt-20">
              <TabPanel>
                <SharePanel item={item} />
              </TabPanel>
              <TabPanel>
                <EmbedPanel item={item} />
              </TabPanel>
            </TabPanels>
          </Tabs>
        )}
      </DialogBody>
      <DialogFooter>
        <Button onClick={() => close()}>
          <Trans message="Close" />
        </Button>
      </DialogFooter>
    </Dialog>
  );
}

function EmbedPanel({item}: Props) {
  const isMobile = useIsMobileMediaQuery();
  const link = `${getLink(item)}/embed`;
  const height = item.model_type === 'track' ? 174 : 384;

  const code = `<iframe width="100%" height="${height}" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" src="${link}"></iframe>`;

  return (
    <div>
      {!isMobile && (
        <iframe
          src={link}
          width="100%"
          height={height}
          allow="autoplay; fullscreen; picture-in-picture"
          allowFullScreen
        />
      )}
      <TextField
        className="mt-20"
        inputElementType="textarea"
        readOnly
        value={code}
        rows={3}
        onClick={e => {
          e.currentTarget.focus();
          e.currentTarget.select();
        }}
      />
    </div>
  );
}

function SharePanel({item}: Props) {
  const link = getLink(item);
  const inputRef = useRef<HTMLInputElement>(null);
  const [copied, copyLink] = useCopyClipboard(link, {successDuration: 600});
  return (
    <div className="flex items-center gap-14">
      <MediaImage
        item={item}
        size="w-128 h-128"
        className="flex-shrink-0 rounded object-cover max-md:hidden"
      />
      <div className="flex-auto">
        <div className="mb-8 text-xl">{item.name}</div>
        <TextField
          className="mb-8"
          inputRef={inputRef}
          readOnly
          onClick={e => {
            e.currentTarget.focus();
            e.currentTarget.select();
          }}
          value={link}
          endAppend={
            <Button
              variant="flat"
              color="primary"
              onClick={() => {
                inputRef.current?.select();
                copyLink();
              }}
            >
              {copied ? <Trans message="Copied!" /> : <Trans message="Copy" />}
            </Button>
          }
        />
        <ShareMediaButtons
          link={link}
          image={'image' in item ? item.image : (item as any).image_small}
          name={item.name}
        />
      </div>
    </div>
  );
}

interface MediaImageProps {
  item: Props['item'];
  className?: string;
  size?: string;
}
function MediaImage({item, className, size}: MediaImageProps) {
  switch (item.model_type) {
    case 'artist':
      return (
        <SmallArtistImage
          size={size}
          className={className}
          wrapperClassName="max-md:hidden"
          artist={item}
        />
      );
    case 'album':
      return <AlbumImage size={size} className={className} album={item} />;
    case 'track':
      return <TrackImage size={size} className={className} track={item} />;
    case 'playlist':
      return (
        <PlaylistImage size={size} className={className} playlist={item} />
      );
  }
}

function getLink(item: Props['item']) {
  switch (item.model_type) {
    case 'artist':
      return getArtistLink(item, {absolute: true});
    case 'album':
      return getAlbumLink(item, {absolute: true});
    case 'track':
      return getTrackLink(item, {absolute: true});
    case 'playlist':
      return getPlaylistLink(item, {absolute: true});
  }
}