/* eslint-disable @typescript-eslint/naming-convention */
/** @jsx jsx */
import { jsx, Flex } from "theme-ui"
import { useSiteTabs } from "../util/site-runners"
import { Link, GatsbyLinkProps, navigate } from "gatsby"
import { GatsbySite } from "../controllers/site"
import { useCallback } from "react"
import { useLocation } from "@reach/router"
import { MdClear } from "react-icons/md"
import { SiteStatusDot } from "./site-status-dot"

interface ITabProps
  extends Omit<GatsbyLinkProps<unknown>, "to" | "ref" | "sx"> {
  site: GatsbySite
}

export function TabLink(
  props: Omit<GatsbyLinkProps<unknown>, "ref">
): JSX.Element {
  return (
    <Link
      {...props}
      activeClassName="active"
      sx={{
        fontFamily: `sans`,
        fontSize: 0,
        fontWeight: 500,
        lineHeight: `default`,
        textDecoration: `none`,
        display: `flex`,
        alignItems: `center`,
        color: `whiteFade.60`,
        py: 3,
        pr: 2,
        pl: 3,
        "&.active": {
          backgroundColor: `purple.80`,
          color: `white`,
        },
        textOverflow: `ellipsis`,
        overflow: `hidden`,
        whiteSpace: `nowrap`,
        cursor: `pointer`,
      }}
      css={{ WebkitAppRegion: `no-drag` }}
    />
  )
}

export function SiteTabLink({ site, ...props }: ITabProps): JSX.Element {
  const { removeTab } = useSiteTabs()

  const location = useLocation()

  const url = `/sites/${site.hash}`

  const isActive = location.pathname === url

  const remove = useCallback(() => {
    if (isActive) {
      navigate(`/sites`)
    }
    removeTab(site.hash)
  }, [removeTab, site, isActive])

  return (
    <Flex
      sx={{
        alignItems: `center`,
        pr: 2,
        py: 3,
        ...(isActive && {
          backgroundColor: `purple.80`,
          color: `white`,
        }),
      }}
    >
      <TabLink {...props} to={url}>
        <SiteStatusDot status={site.siteStatus.status} sx={{ mr: 2 }} />
        {site.name}
      </TabLink>
      <button
        onClick={remove}
        aria-label="Close tab"
        sx={{
          p: 3,
          background: `none`,
          border: `none`,
          fontFamily: `sans`,
          fontWeight: 500,
          textDecoration: `none`,
          color: `primaryBackground`,
          display: `flex`,
          alignItems: `center`,
        }}
      >
        <MdClear />
      </button>
    </Flex>
  )
}

export function TabNavigation(): JSX.Element {
  const { siteTabs } = useSiteTabs()
  return (
    <Flex
      as="nav"
      sx={{
        backgroundColor: `purple.90`,
      }}
      css={{
        WebkitAppRegion: `drag`,
        WebkitUserSelect: `none`,
        paddingLeft: 88,
      }}
    >
      <Link
        to="/sites"
        activeClassName="active"
        sx={{
          display: `flex`,
          alignItems: `center`,
          py: 3,
          px: 4,
          "&.active": {
            backgroundColor: `white`,
          },
          cursor: `pointer`,
        }}
        css={{ WebkitAppRegion: `no-drag` }}
        aria-label="All sites"
      >
        <img
          src={require(`../../assets/tinyicon.svg`)}
          width={16}
          height={16}
          alt=""
        />
      </Link>
      {siteTabs.map((site) => (
        <SiteTabLink key={site.hash} site={site} />
      ))}
    </Flex>
  )
}