import { EmailSelection } from '@/analyst/utilities'
import LinkButton from '@/components/LinkButton'
import { OPEN_COMPOSE_EVENT_TYPE } from '@/email/EmailFormOverlay'
import { useParams } from '@/router'
import { Button } from '@blueprintjs/core'
import { css } from '@emotion/css'
import useGetEmailThreadUnreadCountSuspense from '@inject/graphql/utils/useGetEmailThreadUnreadCountSuspense'
import { createPortal } from 'react-dom'
import { Outlet } from 'react-router-dom'

const Received = () => {
  const { channelId, exerciseId, teamId } = useParams(
    '/instructor/:exerciseId/:teamId/:channelId/email'
  )
  // ordering is intentionally flipped
  const count = useGetEmailThreadUnreadCountSuspense(teamId, 'sent')
  return (
    <LinkButton
      link={[
        '/instructor/:exerciseId/:teamId/:channelId/email/:tab',
        {
          params: {
            channelId,
            exerciseId,
            teamId,
            tab: EmailSelection.RECEIVED,
          },
        },
      ]}
      button={{
        minimal: true,
        intent: count ? 'warning' : undefined,
        text: count ? `(${count})` : undefined,
        title: 'Received by team',
        icon: 'inbox',
      }}
    />
  )
}

const Sent = () => {
  const { channelId, exerciseId, teamId } = useParams(
    '/instructor/:exerciseId/:teamId/:channelId/email'
  )
  // ordering is intentionally flipped
  const count = useGetEmailThreadUnreadCountSuspense(teamId, 'received')

  return (
    <LinkButton
      link={[
        '/instructor/:exerciseId/:teamId/:channelId/email/:tab',
        {
          params: {
            channelId,
            exerciseId,
            teamId,
            tab: EmailSelection.SENT,
          },
        },
      ]}
      button={{
        minimal: true,
        intent: count ? 'warning' : undefined,
        text: count ? `(${count})` : undefined,
        title: 'Sent to team',
        icon: 'send-message',
      }}
    />
  )
}

const Drafts = () => {
  const { channelId, exerciseId, teamId } = useParams(
    '/instructor/:exerciseId/:teamId/:channelId/email'
  )

  return (
    <LinkButton
      link={[
        '/instructor/:exerciseId/:teamId/:channelId/email/:tab',
        {
          params: {
            channelId,
            exerciseId,
            teamId,
            tab: EmailSelection.DRAFTS,
          },
        },
      ]}
      button={{
        minimal: true,
        icon: 'document',
        title: 'Drafts',
      }}
    />
  )
}

const Archived = () => {
  const { channelId, exerciseId, teamId } = useParams(
    '/instructor/:exerciseId/:teamId/:channelId/email'
  )

  return (
    <LinkButton
      link={[
        '/instructor/:exerciseId/:teamId/:channelId/email/:tab',
        {
          params: {
            channelId,
            exerciseId,
            teamId,
            tab: EmailSelection.ARCHIVED,
          },
        },
      ]}
      button={{
        minimal: true,
        icon: 'archive',
        title: 'Archived',
      }}
    />
  )
}

const BackButton = () => {
  const { channelId, exerciseId, teamId, tab, threadId } = useParams(
    '/instructor/:exerciseId/:teamId/:channelId/email/:tab/:threadId'
  )

  return (
    threadId && (
      <LinkButton
        link={[
          '/instructor/:exerciseId/:teamId/:channelId/email/:tab',
          {
            params: {
              channelId,
              exerciseId,
              teamId,
              tab,
            },
          },
        ]}
        button={{
          className: css`
            display: none;
            @media only screen and (max-width: 960px) {
              display: inline-block;
            }
          `,
          minimal: true,
          icon: 'chevron-left',
          text: 'Back',
          title: 'Back to thread view',
        }}
      />
    )
  )
}

const Layout = () => {
  const backnavPortal = document.getElementById('backnavPortal')
  const topnavPortal = document.getElementById('topnavPortal')

  return (
    <>
      {backnavPortal &&
        createPortal(
          <>
            <BackButton />
            <Received />
            <Sent />
            <Drafts />
            <Archived />
          </>,
          backnavPortal
        )}
      {topnavPortal &&
        createPortal(
          <>
            <Button
              minimal
              intent='primary'
              text='Compose'
              icon='edit'
              onClick={() => {
                window.dispatchEvent(new Event(OPEN_COMPOSE_EVENT_TYPE))
              }}
            />
          </>,
          topnavPortal
        )}
      <Outlet />
    </>
  )
}

export default Layout
