import { EmailSelection } from '@/analyst/utilities'
import LinkButton from '@/components/LinkButton'
import { OPEN_COMPOSE_EVENT_TYPE } from '@/email/EmailFormOverlay'
import { useParams } from '@/router'
import useLeftBar from '@/views/InstructorView/useLeftNavbar'
import useRightBar from '@/views/InstructorView/useRightNavbar'
import { Button } from '@blueprintjs/core'
import { css } from '@emotion/css'
import { useLoopStatus } from '@inject/graphql/utils/useExerciseLoopStatusSubscription'
import useGetEmailThreadUnreadCountSuspense from '@inject/graphql/utils/useGetEmailThreadUnreadCountSuspense'
import { Outlet } from 'react-router-dom'

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

const ReceivedByTeam = () => {
  const { exerciseId, teamId } = useParams(
    '/instructor/:exerciseId/:teamId/email'
  )
  const count = useGetEmailThreadUnreadCountSuspense(teamId, 'received')

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

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

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

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

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

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

  return (
    threadId && (
      <LinkButton
        link={[
          '/instructor/:exerciseId/:teamId/email/:tab',
          {
            params: {
              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 { running } = useLoopStatus()
  const elementRight = useRightBar(
    <Button
      minimal
      intent='primary'
      text='Compose'
      icon='edit'
      disabled={!running}
      title={!running ? 'The exercise had been paused/stopped' : undefined}
      onClick={() => {
        window.dispatchEvent(new Event(OPEN_COMPOSE_EVENT_TYPE))
      }}
    />
  )
  const elementLeft = useLeftBar(
    <>
      <BackButton />
      <ReceivedByTeam />
      <SentByTeam />
      <Drafts />
      <Archived />
    </>
  )

  return (
    <>
      {elementLeft}
      {elementRight}
      <Outlet />
    </>
  )
}

export default Layout
