import { useCoreServices } from '@learnitive/context';
import { FunMissing } from '@learnitive/ui-components';
import { useAtomValue } from 'jotai';
import { FileX } from 'lucide-react';
import React from 'react';
import { suggestedProjectFileName } from '../../common/project-file-suggestion';
import { NoticeView } from './notice-view';

/** Displays a notice indicating that the requested note could not be found, using NoticeView. */
export function NoteNotFoundView() {
  const coreServices = useCoreServices();
  const currentWsName = useAtomValue(coreServices.workspaceState.$currentWsName);
  const workspaces = useAtomValue(coreServices.workspaceState.$workspaces);
  const newFileName = suggestedProjectFileName(workspaces.find((item) => item.name === currentWsName)?.metadata);

  const handleNewNote = () => {
    coreServices.commandDispatcher.dispatch(
      'command::ui:create-file-dialog',
      { prefillName: newFileName, pathPrefix: undefined },
      'ui',
    );
  };

  const handleViewAllNotes = () => {
    coreServices.commandDispatcher.dispatch(
      'command::ui:toggle-all-files',
      { prefillInput: undefined },
      'ui',
    );
  };

  return (
    <NoticeView
      title={t.app.noteNotFoundView.title}
      description={
        <>
          {t.app.noteNotFoundView.description}
          <br />
          <FunMissing />
        </>
      }
      illustration={
        <div className="flex items-center justify-center">
          <FileX
            className="h-24 w-24 stroke-[1.5] stroke-muted-foreground"
            aria-hidden="true"
          />
        </div>
      }
      actions={[
        {
          label: t.app.pageWsHome.newNoteButton,
          onClick: handleNewNote,
        },
        {
          label: t.app.noteNotFoundView.viewAllNotesButton,
          variant: 'outline',
          onClick: handleViewAllNotes,
        },
      ]}
    />
  );
}