import { css } from "@emotion/css"
import styled from "@emotion/styled"
import { memo } from "react"
import Icon from "@aet/icons/macro"
import { useTranslation } from "react-i18next"
import { useEvent } from "@aet/hooks"
import { IconButton } from "~/shared/styled"
import { color } from "~/options/theme"
import { ErrorBoundary } from "~/shared/ErrorBoundary"
import { USERNAME_KEY } from "~/shared/constants"
import { type AuthStateQueryQuery, gql, useMutation } from "~/generated/graphql"

const LogOutMutation = gql<"LogOutMutation">`
  mutation LogOutMutation {
    logout
  }
`

export const LoggedIn = memo<{
  data: NonNullable<AuthStateQueryQuery["remoteInfo"]>
}>(({ data }) => {
  const { t } = useTranslation()
  const [logOut] = useMutation(LogOutMutation)

  const onSignOut = useEvent(async () => {
    await logOut()
  })

  return (
    <LoggedInContainer>
      <Header>
        <Icon
          icon="AiOutlineCloud"
          className={css`
            font-size: 20px;
            margin-right: 5px;
          `}
        />
        <ErrorBoundary>
          <Username>{localStorage.getItem(USERNAME_KEY)}</Username>
        </ErrorBoundary>
        <IconButton onClick={onSignOut}>{t("cloud.logout")}</IconButton>
      </Header>

      <DataContainer>
        {data.docCount ? (
          <>
            <Icon
              icon="FiRefreshCw"
              className={css`
                font-size: 15px;
                margin-right: 8px;
                margin-left: 2px;
              `}
            />
            <span>{data.updateSeq}</span>
            {/* <time style={{ flex: 1 }}>{relativeTime(remoteStatus.lastModified)}</time> */}
          </>
        ) : (
          <NoData />
        )}
      </DataContainer>

      <div
        className={css`
          margin-bottom: 10px;
        `}
      />
    </LoggedInContainer>
  )
})

const NoData = memo(() => {
  const { t } = useTranslation()
  return (
    <div
      className={css`
        text-align: center;
        opacity: 0.575;
        width: 100%;
        margin-top: 18px;

        --ellipse-fill: ${color("#f5f5f5", "#272727")};
        --g-stroke: ${color("#d9d9d9", "#3e3e3e")};
        --path-fill: ${color("#fafafa", "#1d1d1d")};
      `}
    >
      {/* From ant.design */}
      <svg width="64" height="41" viewBox="0 0 64 41">
        <g transform="translate(0 1)" fill="none" fillRule="evenodd">
          <ellipse fill="var(--ellipse-fill)" cx="32" cy="33" rx="32" ry="7"></ellipse>
          <g fillRule="nonzero" stroke="var(--g-stroke)">
            <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z" />
            <path
              d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
              fill="var(--path-fill)"
            />
          </g>
        </g>
      </svg>
      <div
        className={css`
          margin: 10px 0;
        `}
      >
        {t("cloud.noFilesFound")}
      </div>
    </div>
  )
})

const Header = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: 9px;
`
const LoggedInContainer = styled.div`
  display: flex;
  flex-direction: column;
`
const Username = styled.div`
  flex: 1;
`
const DataContainer = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: 13px;
`
