import { useState } from 'react';
import dynamic from 'next/dynamic';

import type { MappedContentLink } from '~/lib/songwhipApi/mapper';

import { Clickable } from '~/src/components/Clickable';
import ShareIconWrapper from '~/src/components/Icon/ShareIcon';
import { Layout } from '~/src/ui/layouts/layout';

const ContentLinkShareDialogDynamic = dynamic({
  ssr: false,
  loader: () =>
    import('~/src/features/contentLink/components/shareDialog').then(
      (m) => m.ContentLinkShareDialog
    ),
});

export const ContentLinkShareButton = ({
  contentLink,
}: {
  contentLink: MappedContentLink;
}) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Layout justify="end">
        <Clickable
          testId="contentLinkShareButton"
          isInline
          onClick={() => {
            setIsOpen(true);
          }}
        >
          <ShareIconWrapper size={24} />
        </Clickable>
      </Layout>
      {isOpen && (
        <ContentLinkShareDialogDynamic
          contentLink={contentLink}
          onClose={() => {
            setIsOpen(false);
          }}
        />
      )}
    </>
  );
};