import { useState } from 'react';

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

import DialogBox from '~/src/components/DialogBox';
import { useI18nDynamic } from '~/src/lib/i18n';
import { Layout } from '~/src/ui/layouts/layout';
import { ChannelsTable } from './ChannelsTable';
import { DialogHeader } from './DialogHeader';
import { DialogHelpText } from './DialogHelpText';
import { DialogSearchInput } from './DialogSearchInput';

export const ContentLinkShareDialog = ({
  contentLink,
  onClose,
}: {
  contentLink: MappedContentLink;
  onClose: () => void;
}) => {
  const [filter, setFilter] = useState('');
  const { t, loading } = useI18nDynamic('contentLink');

  return (
    <DialogBox
      onClose={onClose}
      isLoading={loading}
      testId="contentLinkShareDialog"
      maxWidth="58rem"
      maxHeight="58rem"
      renderContent={() => (
        <Layout column gap="6" paddingX="4" paddingTop="5" paddingBottom="6">
          <Layout column gap="3">
            <DialogHeader onClose={onClose} title={t('shareDialog.title')} />
            <DialogSearchInput onChange={setFilter} />
          </Layout>
          <Layout column gap="4">
            <DialogHelpText />
            <ChannelsTable contentLink={contentLink} channelFilter={filter} />
          </Layout>
        </Layout>
      )}
    />
  );
};