import { postLogin } from '@api/auth'
import { useSiteContext } from '@context/SiteContext'
import useLanguage from '@hooks/useLanguage'
import {
  Button,
  Center,
  FormControl,
  FormErrorMessage,
  FormLabel,
  Heading,
  Input,
  Stack,
  notificationService,
} from '@hope-ui/solid'
import { useNavigate } from '@solidjs/router'
import { Field, useFormHandler } from 'solid-form-handler'
import { yupSchema } from 'solid-form-handler/yup'
import { Show, onMount } from 'solid-js'
import { styled } from 'solid-styled-components'
import * as yup from 'yup'

const LoginPage = styled('div')`
  width: 100%;
  height: 100svh;
  display: flex;
  padding-left: 15px;
  padding-right: 15px;
  place-items: center;

  .login-wrap {
    width: 40%;
    max-width: 500px;
    min-width: 320px;
    margin: 0 auto;

    .logo {
      width: 40%;
      max-width: 150px;
      min-width: 100px;
    }

    .login-box {
      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      padding: 1rem;
    }
  }
`

const loginSchema = yup.object({
  username: yup.string().required('Username is required'),
  password: yup.string().required('Password is required'),
})

const language = useLanguage()

export default function Login() {
  const { store, setAuth } = useSiteContext()
  const navigate = useNavigate()
  const formHandler = useFormHandler(yupSchema(loginSchema))
  const { formData } = formHandler

  onMount(() => {
    if (store.auth) {
      navigate('/', { replace: true })
    }
  })

  const submit = async (event) => {
    event.preventDefault()
    await formHandler.validateForm()
    try {
      const loginData = {
        username: formData()?.username,
        password: formData()?.password,
      }

      const resp = await postLogin(loginData)

      if (resp.status === 200) {
        const user = resp?.data || {}
        setAuth({ auth: true, user })
        formHandler.resetForm()
        navigate('/', { replace: true })
      }
    } catch (error) {
      notificationService.show({
        status: 'danger',
        title: 'Login fail!',
        description: error?.data || 'Your username or password input is wrong!',
        closable: false,
      })
    }
  }

  return (
    <LoginPage>
      <div class="login-wrap">
        <Center width="100%" mb="$10">
          <picture class="logo">
            <source
              srcSet="/images/logo_fuware.png"
              type="image/png"
              media="(min-width: 600px)"
            />
            <img src="/images/logo_fuware.png" alt="logo" />
          </picture>
        </Center>
        <div class="login-box">
          <form autoComplete="off" onSubmit={submit}>
            <Stack direction="column">
              <Center w="100%" mb="$5">
                <Heading level="1" size="xl">
                  {language.ui.login}
                </Heading>
              </Center>
              <Field
                mode="input"
                name="username"
                formHandler={formHandler}
                render={(field) => (
                  <FormControl mb="$3" invalid={field.helpers.error}>
                    <FormLabel for="username">
                      {language.ui.username}:
                    </FormLabel>
                    <Input id="username" type="text" {...field.props} />
                    <Show when={field.helpers.error}>
                      <FormErrorMessage>
                        {field.helpers.errorMessage}
                      </FormErrorMessage>
                    </Show>
                  </FormControl>
                )}
              />
              <Field
                mode="input"
                name="password"
                formHandler={formHandler}
                render={(field) => (
                  <FormControl mb="$5" invalid={field.helpers.error}>
                    <FormLabel for="username">
                      {language.ui.password}:
                    </FormLabel>
                    <Input id="password" type="password" {...field.props} />
                    <Show when={field.helpers.error}>
                      <FormErrorMessage>
                        {field.helpers.errorMessage}
                      </FormErrorMessage>
                    </Show>
                  </FormControl>
                )}
              />
              <Button size="sm" type="submit">
                {language.ui.login}
              </Button>
            </Stack>
          </form>
        </div>
      </div>
    </LoginPage>
  )
}