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 useGetEmailThreadUnreadCountSuspense from '@inject/graphql/utils/useGetEmailThreadUnreadCountSuspense'
import { Outlet } from 'react-router-dom'

const Received = () => {
  const { channelId, exerciseId, teamId } = useParams(
    '/trainee/:exerciseId/:teamId/:channelId/email'
  )
  const count = useGetEmailThreadUnreadCountSuspense(teamId, 'received')
  return (
    <LinkButton
      link={[
        '/trainee/:exerciseId/:teamId/:channelId/email/:tab',
        {
          params: {
            channelId,
            exerciseId,
            teamId,
            tab: EmailSelection.RECEIVED,
          },
        },
      ]}
      button={{
        minimal: true,
        intent: count ? 'warning' : undefined,
        text: count ? `Received (${count})` : 'Received',
        icon: 'inbox',
      }}
    />
  )
}

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

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

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

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

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

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

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

  return (
    threadId && (
      <LinkButton
        link={[
          '/trainee/:exerciseId/:teamId/:channelId/email/:tab',
          {
            params: {
              channelId,
              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 = () => (
  <>
    <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'
        onClick={() => {
          window.dispatchEvent(new Event(OPEN_COMPOSE_EVENT_TYPE))
        }}
      />
    </div>

    <Outlet />
  </>
)

export default Layout
