import { useCallback } from 'react';

import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

import { useLocation } from 'react-router';

import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
import { me } from '@/mastodon/initial_state';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import { changeCompose, focusCompose } from 'mastodon/actions/compose';
import type { ApiCollectionJSON } from 'mastodon/api_types/collections';
import { Button } from 'mastodon/components/button';
import { CopyLinkField } from 'mastodon/components/form_fields';
import { IconButton } from 'mastodon/components/icon_button';
import {
  ModalShell,
  ModalShellActions,
  ModalShellBody,
} from 'mastodon/components/modal_shell';
import { useAppDispatch } from 'mastodon/store';

import { CollectionPreviewCard } from './collection_preview_card';
import classes from './share_modal.module.scss';

const messages = defineMessages({
  shareTextOwn: {
    id: 'collection.share_template_own',
    defaultMessage: 'Check out my new collection:',
    description: 'Collection links are appended after a new line',
  },
  shareTextOther: {
    id: 'collection.share_template_other',
    defaultMessage: 'Check out this cool collection:',
    description: 'Collection links are appended after a new line',
  },
});

export const CollectionShareModal: React.FC<{
  collection: ApiCollectionJSON;
  onClose: () => void;
}> = ({ collection, onClose }) => {
  const intl = useIntl();
  const dispatch = useAppDispatch();
  const location = useLocation<{ newCollection?: boolean } | undefined>();
  const isNew = !!location.state?.newCollection;
  const isOwnCollection = collection.account_id === me;

  const collectionLink = collection.url;

  const handleShareOnDevice = useCallback(() => {
    void navigator.share({
      url: collectionLink,
    });
  }, [collectionLink]);

  const handleShareViaPost = useCallback(() => {
    let shareMessage = isOwnCollection
      ? intl.formatMessage(messages.shareTextOwn)
      : intl.formatMessage(messages.shareTextOther);
    shareMessage += `\n\n${collectionLink}`;

    onClose();
    dispatch(changeCompose(shareMessage));
    dispatch(focusCompose());
  }, [onClose, collectionLink, dispatch, intl, isOwnCollection]);

  return (
    <ModalShell>
      <ModalShellBody>
        <NavigationFocusTarget as='h1' className={classes.heading}>
          {isNew ? (
            <FormattedMessage
              id='collection.share_modal.title_new'
              defaultMessage='Share your new collection!'
            />
          ) : (
            <FormattedMessage
              id='collection.share_modal.title'
              defaultMessage='Share collection'
            />
          )}
        </NavigationFocusTarget>

        <IconButton
          title={intl.formatMessage({
            id: 'lightbox.close',
            defaultMessage: 'Close',
          })}
          iconComponent={CloseIcon}
          icon='close'
          className={classes.closeButtonDesktop}
          onClick={onClose}
        />

        <div className={classes.preview}>
          <CollectionPreviewCard collection={collection} headingLevel='h2' />
        </div>

        <CopyLinkField
          label={intl.formatMessage({
            id: 'collection.share_modal.share_link_label',
            defaultMessage: 'Share link',
          })}
          value={collectionLink}
        />
      </ModalShellBody>

      <ModalShellActions className={classes.actions}>
        <div className={classes.shareButtonWrapper}>
          <Button secondary onClick={handleShareViaPost}>
            <FormattedMessage
              id='collection.share_modal.share_via_post'
              defaultMessage='Post on Mastodon'
            />
          </Button>
          {'share' in navigator && (
            <Button secondary onClick={handleShareOnDevice}>
              <FormattedMessage
                id='collection.share_modal.share_via_system'
                defaultMessage='Share to…'
              />
            </Button>
          )}
        </div>

        <Button plain onClick={onClose} className={classes.closeButtonMobile}>
          <FormattedMessage id='lightbox.close' defaultMessage='Close' />
        </Button>
      </ModalShellActions>
    </ModalShell>
  );
};