import { AppState } from '@/UIModels/AppState'
import { Icon } from '@/Components/Icon/Icon'
import { Switch } from '@/Components/Switch/Switch'
import { observer } from 'mobx-react-lite'
import { useState, useEffect, useMemo, useCallback } from 'preact/hooks'
import { SNApplication, SNNote } from '@standardnotes/snjs'
import { WebApplication } from '@/UIModels/Application'
import { KeyboardModifier } from '@/Services/IOService'
import { FunctionComponent } from 'preact'
import { ChangeEditorOption } from './ChangeEditorOption'
import { BYTES_IN_ONE_MEGABYTE } from '@/Constants'
import { ListedActionsOption } from './ListedActionsOption'
import { AddTagOption } from './AddTagOption'
import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'

export type NotesOptionsProps = {
  application: WebApplication
  appState: AppState
  closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
}

type DeletePermanentlyButtonProps = {
  closeOnBlur: NotesOptionsProps['closeOnBlur']
  onClick: () => void
}

const DeletePermanentlyButton = ({ closeOnBlur, onClick }: DeletePermanentlyButtonProps) => (
  <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={onClick}>
    <Icon type="close" className="color-danger mr-2" />
    <span className="color-danger">Delete permanently</span>
  </button>
)

const iconClass = 'color-neutral mr-2'
const iconClassDanger = 'color-danger mr-2'
const iconClassWarning = 'color-warning mr-2'
const iconClassSuccess = 'color-success mr-2'

const getWordCount = (text: string) => {
  if (text.trim().length === 0) {
    return 0
  }
  return text.split(/\s+/).length
}

const getParagraphCount = (text: string) => {
  if (text.trim().length === 0) {
    return 0
  }
  return text.replace(/\n$/gm, '').split(/\n/).length
}

const countNoteAttributes = (text: string) => {
  try {
    JSON.parse(text)
    return {
      characters: 'N/A',
      words: 'N/A',
      paragraphs: 'N/A',
    }
  } catch {
    const characters = text.length
    const words = getWordCount(text)
    const paragraphs = getParagraphCount(text)

    return {
      characters,
      words,
      paragraphs,
    }
  }
}

const calculateReadTime = (words: number) => {
  const timeToRead = Math.round(words / 200)
  if (timeToRead === 0) {
    return '< 1 minute'
  } else {
    return `${timeToRead} ${timeToRead > 1 ? 'minutes' : 'minute'}`
  }
}

const formatDate = (date: Date | undefined) => {
  if (!date) {
    return
  }
  return `${date.toDateString()} ${date.toLocaleTimeString()}`
}

const NoteAttributes: FunctionComponent<{
  application: SNApplication
  note: SNNote
}> = ({ application, note }) => {
  const { words, characters, paragraphs } = useMemo(() => countNoteAttributes(note.text), [note.text])

  const readTime = useMemo(() => (typeof words === 'number' ? calculateReadTime(words) : 'N/A'), [words])

  const dateLastModified = useMemo(() => formatDate(note.userModifiedDate), [note.userModifiedDate])

  const dateCreated = useMemo(() => formatDate(note.created_at), [note.created_at])

  const editor = application.componentManager.editorForNote(note)
  const format = editor?.package_info?.file_type || 'txt'

  return (
    <div className="px-3 pt-1.5 pb-2.5 text-xs color-neutral font-medium">
      {typeof words === 'number' && (format === 'txt' || format === 'md') ? (
        <>
          <div className="mb-1">
            {words} words · {characters} characters · {paragraphs} paragraphs
          </div>
          <div className="mb-1">
            <span className="font-semibold">Read time:</span> {readTime}
          </div>
        </>
      ) : null}
      <div className="mb-1">
        <span className="font-semibold">Last modified:</span> {dateLastModified}
      </div>
      <div className="mb-1">
        <span className="font-semibold">Created:</span> {dateCreated}
      </div>
      <div>
        <span className="font-semibold">Note ID:</span> {note.uuid}
      </div>
    </div>
  )
}

const SpellcheckOptions: FunctionComponent<{
  appState: AppState
  note: SNNote
}> = ({ appState, note }) => {
  const editor = appState.application.componentManager.editorForNote(note)
  const spellcheckControllable = Boolean(!editor || editor.package_info.spellcheckControl)
  const noteSpellcheck = !spellcheckControllable
    ? true
    : note
    ? appState.notes.getSpellcheckStateForNote(note)
    : undefined

  return (
    <div className="flex flex-col">
      <button
        className="sn-dropdown-item justify-between px-3 py-1"
        onClick={() => {
          appState.notes.toggleGlobalSpellcheckForNote(note).catch(console.error)
        }}
        disabled={!spellcheckControllable}
      >
        <span className="flex items-center">
          <Icon type="notes" className={iconClass} />
          Spellcheck
        </span>
        <Switch className="px-0" checked={noteSpellcheck} disabled={!spellcheckControllable} />
      </button>
      {!spellcheckControllable && (
        <p className="text-xs px-3 py-1.5">Spellcheck cannot be controlled for this editor.</p>
      )}
    </div>
  )
}

const NOTE_SIZE_WARNING_THRESHOLD = 0.5 * BYTES_IN_ONE_MEGABYTE

const NoteSizeWarning: FunctionComponent<{
  note: SNNote
}> = ({ note }) => {
  return new Blob([note.text]).size > NOTE_SIZE_WARNING_THRESHOLD ? (
    <div className="flex items-center px-3 py-3.5 relative bg-warning-faded">
      <Icon type="warning" className="color-accessory-tint-3 flex-shrink-0 mr-3" />
      <div className="color-warning-contrast select-none leading-140% max-w-80%">
        This note may have trouble syncing to the mobile application due to its size.
      </div>
    </div>
  ) : null
}

export const NotesOptions = observer(({ application, appState, closeOnBlur }: NotesOptionsProps) => {
  const [altKeyDown, setAltKeyDown] = useState(false)

  const toggleOn = (condition: (note: SNNote) => boolean) => {
    const notesMatchingAttribute = notes.filter(condition)
    const notesNotMatchingAttribute = notes.filter((note) => !condition(note))
    return notesMatchingAttribute.length > notesNotMatchingAttribute.length
  }

  const notes = Object.values(appState.notes.selectedNotes)
  const hidePreviews = toggleOn((note) => note.hidePreview)
  const locked = toggleOn((note) => note.locked)
  const protect = toggleOn((note) => note.protected)
  const archived = notes.some((note) => note.archived)
  const unarchived = notes.some((note) => !note.archived)
  const trashed = notes.some((note) => note.trashed)
  const notTrashed = notes.some((note) => !note.trashed)
  const pinned = notes.some((note) => note.pinned)
  const unpinned = notes.some((note) => !note.pinned)

  useEffect(() => {
    const removeAltKeyObserver = application.io.addKeyObserver({
      modifiers: [KeyboardModifier.Alt],
      onKeyDown: () => {
        setAltKeyDown(true)
      },
      onKeyUp: () => {
        setAltKeyDown(false)
      },
    })

    return () => {
      removeAltKeyObserver()
    }
  }, [application])

  const getNoteFileName = useCallback(
    (note: SNNote): string => {
      const editor = application.componentManager.editorForNote(note)
      const format = editor?.package_info?.file_type || 'txt'
      return `${note.title}.${format}`
    },
    [application],
  )

  const downloadSelectedItems = useCallback(async () => {
    if (notes.length === 1) {
      application.getArchiveService().downloadData(new Blob([notes[0].text]), getNoteFileName(notes[0]))
      return
    }

    if (notes.length > 1) {
      const loadingToastId = addToast({
        type: ToastType.Loading,
        message: `Exporting ${notes.length} notes...`,
      })
      await application.getArchiveService().downloadDataAsZip(
        notes.map((note) => {
          return {
            filename: getNoteFileName(note),
            content: new Blob([note.text]),
          }
        }),
      )
      dismissToast(loadingToastId)
      addToast({
        type: ToastType.Success,
        message: `Exported ${notes.length} notes`,
      })
    }
  }, [application, getNoteFileName, notes])

  const duplicateSelectedItems = useCallback(() => {
    notes.forEach((note) => {
      application.mutator.duplicateItem(note).catch(console.error)
    })
  }, [application, notes])

  const openRevisionHistoryModal = useCallback(() => {
    appState.notes.setShowRevisionHistoryModal(true)
  }, [appState])

  return (
    <>
      {notes.length === 1 && (
        <>
          <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={openRevisionHistoryModal}>
            <Icon type="history" className={iconClass} />
            Note history
          </button>
          <div className="min-h-1px my-2 bg-border"></div>
        </>
      )}
      <button
        className="sn-dropdown-item justify-between"
        onClick={() => {
          appState.notes.setLockSelectedNotes(!locked)
        }}
        onBlur={closeOnBlur}
      >
        <span className="flex items-center">
          <Icon type="pencil-off" className={iconClass} />
          Prevent editing
        </span>
        <Switch className="px-0" checked={locked} />
      </button>
      <button
        className="sn-dropdown-item justify-between"
        onClick={() => {
          appState.notes.setHideSelectedNotePreviews(!hidePreviews)
        }}
        onBlur={closeOnBlur}
      >
        <span className="flex items-center">
          <Icon type="rich-text" className={iconClass} />
          Show preview
        </span>
        <Switch className="px-0" checked={!hidePreviews} />
      </button>
      <button
        className="sn-dropdown-item justify-between"
        onClick={() => {
          appState.notes.setProtectSelectedNotes(!protect).catch(console.error)
        }}
        onBlur={closeOnBlur}
      >
        <span className="flex items-center">
          <Icon type="password" className={iconClass} />
          Password protect
        </span>
        <Switch className="px-0" checked={protect} />
      </button>
      {notes.length === 1 && (
        <>
          <div className="min-h-1px my-2 bg-border"></div>
          <ChangeEditorOption appState={appState} application={application} note={notes[0]} />
        </>
      )}
      <div className="min-h-1px my-2 bg-border"></div>
      {appState.tags.tagsCount > 0 && <AddTagOption appState={appState} />}
      {unpinned && (
        <button
          onBlur={closeOnBlur}
          className="sn-dropdown-item"
          onClick={() => {
            appState.notes.setPinSelectedNotes(true)
          }}
        >
          <Icon type="pin" className={iconClass} />
          Pin to top
        </button>
      )}
      {pinned && (
        <button
          onBlur={closeOnBlur}
          className="sn-dropdown-item"
          onClick={() => {
            appState.notes.setPinSelectedNotes(false)
          }}
        >
          <Icon type="unpin" className={iconClass} />
          Unpin
        </button>
      )}
      <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={downloadSelectedItems}>
        <Icon type="download" className={iconClass} />
        Export
      </button>
      <button onBlur={closeOnBlur} className="sn-dropdown-item" onClick={duplicateSelectedItems}>
        <Icon type="copy" className={iconClass} />
        Duplicate
      </button>
      {unarchived && (
        <button
          onBlur={closeOnBlur}
          className="sn-dropdown-item"
          onClick={() => {
            appState.notes.setArchiveSelectedNotes(true).catch(console.error)
          }}
        >
          <Icon type="archive" className={iconClassWarning} />
          <span className="color-warning">Archive</span>
        </button>
      )}
      {archived && (
        <button
          onBlur={closeOnBlur}
          className="sn-dropdown-item"
          onClick={() => {
            appState.notes.setArchiveSelectedNotes(false).catch(console.error)
          }}
        >
          <Icon type="unarchive" className={iconClassWarning} />
          <span className="color-warning">Unarchive</span>
        </button>
      )}
      {notTrashed &&
        (altKeyDown ? (
          <DeletePermanentlyButton
            closeOnBlur={closeOnBlur}
            onClick={async () => {
              await appState.notes.deleteNotesPermanently()
            }}
          />
        ) : (
          <button
            onBlur={closeOnBlur}
            className="sn-dropdown-item"
            onClick={async () => {
              await appState.notes.setTrashSelectedNotes(true)
            }}
          >
            <Icon type="trash" className={iconClassDanger} />
            <span className="color-danger">Move to trash</span>
          </button>
        ))}
      {trashed && (
        <>
          <button
            onBlur={closeOnBlur}
            className="sn-dropdown-item"
            onClick={async () => {
              await appState.notes.setTrashSelectedNotes(false)
            }}
          >
            <Icon type="restore" className={iconClassSuccess} />
            <span className="color-success">Restore</span>
          </button>
          <DeletePermanentlyButton
            closeOnBlur={closeOnBlur}
            onClick={async () => {
              await appState.notes.deleteNotesPermanently()
            }}
          />
          <button
            onBlur={closeOnBlur}
            className="sn-dropdown-item"
            onClick={async () => {
              await appState.notes.emptyTrash()
            }}
          >
            <div className="flex items-start">
              <Icon type="trash-sweep" className="color-danger mr-2" />
              <div className="flex-row">
                <div className="color-danger">Empty Trash</div>
                <div className="text-xs">{appState.notes.trashedNotesCount} notes in Trash</div>
              </div>
            </div>
          </button>
        </>
      )}
      {notes.length === 1 ? (
        <>
          <div className="min-h-1px my-2 bg-border"></div>
          <ListedActionsOption application={application} note={notes[0]} />
          <div className="min-h-1px my-2 bg-border"></div>
          <SpellcheckOptions appState={appState} note={notes[0]} />
          <div className="min-h-1px my-2 bg-border"></div>
          <NoteAttributes application={application} note={notes[0]} />
          <NoteSizeWarning note={notes[0]} />
        </>
      ) : null}
    </>
  )
})