import { EmailSelection } from '@/analyst/utilities'
import LinkButton from '@/components/LinkButton'
import { OPEN_COMPOSE_EVENT_TYPE } from '@/email/EmailFormOverlay'
import { useParams } from '@/router'
import { Button, Colors } 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 Received = () => {
  const { exerciseId, teamId } = useParams('/trainee/:exerciseId/:teamId/email')
  const count = useGetEmailThreadUnreadCountSuspense(teamId, 'received')
  return (
    <LinkButton
      link={[
        '/trainee/:exerciseId/:teamId/email/:tab',
        {
          params: {
            exerciseId,
            teamId,
            tab: EmailSelection.RECEIVED,
          },
        },
      ]}
      button={{
        minimal: true,
        intent: count ? 'warning' : undefined,
        text: count ? `Received (${count})` : 'Received',
        icon: 'inbox',
      }}
    />
  )
}

const Sent = () => {
  const { exerciseId, teamId } = useParams('/trainee/:exerciseId/:teamId/email')
  const count = useGetEmailThreadUnreadCountSuspense(teamId, 'sent')

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

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

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

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

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

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

  return (
    threadId && (
      <LinkButton
        link={[
          '/trainee/:exerciseId/:teamId/email/:tab',
          {
            params: {
              exerciseId,
              teamId,
              tab,
            },
          },
        ]}
        end
        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()
  return (
    <>
      <div
        className={css`
          padding-bottom: 0.25rem;
          margin-bottom: 0.25rem;
          border-bottom: 1px solid ${Colors.BLACK}26;
          .bp5-dark & {
            border-bottom-color: ${Colors.WHITE}33;
          }
          display: flex;
        `}
      >
        <BackButton />
        <Received />
        <Sent />
        <Drafts />
        <Archived />
        <Button
          minimal
          style={{ marginLeft: 'auto' }}
          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))
          }}
        />
      </div>

      <Outlet />
    </>
  )
}

export default Layout
