import styled from "@emotion/styled"
import { css } from "@emotion/css"
import Icon from "@aet/icons/macro"
import { useTranslation } from "react-i18next"
import { useState } from "react"
import { LIGHT_MODE, color, token } from "~/options/theme"
import { Pill } from "~/shared/styled"
import { SERVER } from "~/shared/constants"
import { gql, useMutation } from "~/generated/graphql"
import { AuthQuery } from "./Auth"

const LoginMutation = gql<"Login">`
  mutation Login($username: String!, $password: String!) {
    login(username: $username, password: $password)
  }
`

export const Login: FC<{
  className?: string
}> = ({ className }) => {
  const { t } = useTranslation()
  const [username, setEmail] = useState("")
  const [password, setPassword] = useState("")

  const [login] = useMutation(LoginMutation, {
    variables: { username, password },
    refetchQueries: [AuthQuery],
  })

  const onLogIn = () => {
    void login()
  }

  return (
    <LoginContainer className={className}>
      <IconContainer>
        <Icon
          icon="AiOutlineCloud"
          className={css`
            font-size: 100px;
          `}
        />
      </IconContainer>
      <LoginFormEntry>
        <UsernameInput
          type="text"
          name="email"
          value={username}
          onChange={e => setEmail(e.target.value)}
          placeholder={t("cloud.email")}
        />
        <PasswordInput
          type="password"
          name="password"
          value={password}
          onChange={e => setPassword(e.target.value)}
          placeholder={t("cloud.password")}
        />
      </LoginFormEntry>
      <LoginFormEntry>
        <Label>{t("cloud.server")}</Label>
        <br />
        <Select disabled value={SERVER}>
          <option value={SERVER}>{SERVER}</option>
        </Select>
      </LoginFormEntry>

      <FormButtons>
        <Pill disabled>{t("cloud.register")}</Pill>
        <LoginButton onClick={() => void onLogIn()} disabled={!username || !password}>
          {t("cloud.login")}
        </LoginButton>
      </FormButtons>
    </LoginContainer>
  )
}
const LoginContainer = styled.div``

const IconContainer = styled.div`
  text-align: center;
`

const LoginFormEntry = styled.div`
  margin-top: 6px;
  margin-bottom: 15px;
`
const FormButtons = styled(LoginFormEntry)`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
`
const LoginButton = styled(Pill)`
  background: ${token.success.emphasis};
  border-color: ${color("#1b1f2426", "#f0f6fc19")};
  color: #fff;
  line-height: 1.3em;
  &:hover {
    background: ${color("#2c974b", "#2ea043")};
    color: #fff;
    transition: 0.1s;
  }
  &:disabled {
    background: ${token.success.emphasis};
  }
`
const Label = styled.label`
  display: block;
  margin-bottom: -6px;
`
const Input = styled.input`
  background-color: ${token.canvas.overlay};
  border-radius: 5px;
  border: 1px solid ${token.border.default};
  padding: 8px 10px;
  width: 100%;
  &:disabled {
    cursor: not-allowed;
    opacity: 0.7;
  }
  &:focus {
    border-color: #5f677a;
  }
`
const Select = Input.withComponent("select")

const UsernameInput = styled(Input)`
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  ${LIGHT_MODE} {
    margin-bottom: -1px;
  }
`

const PasswordInput = styled(Input)`
  border-top-left-radius: 0;
  border-top-right-radius: 0;
`
