import { useState } from 'react';
import { PowerIcon } from 'lucide-react';
import { toast } from 'sonner';

import { useSeoBadges } from '../../context/seo-badges.context';
import { classNames } from '../../lib/utils';
import { updateSeoSettings } from '../../service/seo/seo.service';
import { Button } from '../ui/button';
import { Callout } from '../ui/callout';

/**
 * What a module page says while its module is off: that nothing on it
 * reaches the site, and one button that switches the module on. Reads the
 * module states the menu reads, so the page and the menu agree.
 */
export const ModuleOffNotice = ({
  module,
  children,
  onSwitchedOn,
  className,
}: {
  module: string;
  children: string;
  onSwitchedOn?: () => void;
  /** Spacing around the notice, which renders nothing while the module is on. */
  className?: string;
}): JSX.Element | null => {
  const { badges, refresh } = useSeoBadges();
  const [busy, setBusy] = useState(false);

  if (badges?.modules?.[module] !== false) {
    return null;
  }

  const switchOn = async (): Promise<void> => {
    setBusy(true);
    try {
      const settings = await updateSeoSettings({ modules: { [module]: true } });
      toast.success(`${settings.modules[module]?.label ?? module} switched on`);
      refresh();
      onSwitchedOn?.();
    } catch (reason) {
      toast.error((reason as Error).message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <Callout
      tone="warning"
      className={classNames('flex flex-wrap items-center gap-3', className)}
    >
      <p className="min-w-0 flex-1 text-sm text-foreground">{children}</p>
      <Button type="button" size="sm" onClick={switchOn} disabled={busy}>
        <PowerIcon />
        Switch it on
      </Button>
    </Callout>
  );
};