import React, { useEffect, useState } from "react"
import { Input, Layout, Button, Divider, Typography, Row, Col } from 'antd';
import { PhoneOutlined } from '@ant-design/icons';
import {login, loginWithCredify, initialize, Environment} from "credify-web-sdk"
import { useLocation } from "react-router-dom"
import {setMarketEnvironment} from "../../config";

const DEFAULT_API_KEY =
  "1F36ve7ONARLUKJ8mOMsoA2FFjmfvMeuUU3G9vcp6dcDyIqxmFQdnebzm2LnXoRs"
const CLIENT_ID =
  "cc61532e-4668-4bee-b8c1-95fd0bec7f09"

const { Title, Paragraph } = Typography;
const { Header, Footer, Content } = Layout;

function LoginPage() {

  const [phone, setPhone] = useState("");
  const [url, setUrl] = useState("");
  const location = useLocation()

  useEffect(() => {
    const urlSearch = new URLSearchParams(location.search)
    const env = urlSearch.get("env")
    const apiKey = urlSearch.get("apiKey") || DEFAULT_API_KEY
    const marketId = urlSearch.get("marketId") || CLIENT_ID
    initialize(env as Environment, apiKey, marketId)
    // Demo Market environment
    setMarketEnvironment(env as Environment)
  }, [])

  const doLogin = async () => {
    await login(url)
  }

  const doLogin2 = async () => {
    const demoUserPhone = {
      countryCode: "84",
      phoneNumber: phone
    }
    await loginWithCredify(CLIENT_ID, demoUserPhone)
  }

  return (
    <>
      <Layout>
        <Header style={{ background: "none", padding: "1rem", height: "5.5rem" }}>
          <Title style={{ textAlign: "center" }}>Login Test</Title>
        </Header>
        <Content>
          <Row>
            <Col span={12} offset={6}>
              <h2 style={{ textAlign: "center" }}>Login with OIDC setup URL</h2>
              <Paragraph style={{ textAlign: "center" }}>
                Please provide a set up URL for OIDC. This supports only Vietnamese phone numbers.
              </Paragraph>
              <Row>
                <Col span={12} offset={6}>
                  <Input placeholder="https://dev-demo-api.credify.ninja/xxx/oidc?phone_number=381231234&country_code=84" onChange={(e) => setUrl(e.target.value)} value={url}/>
                  <Button onClick={doLogin} style={{ marginTop: "1rem" }} block>Login with Credify</Button>
                </Col>
              </Row>
            </Col>

            <Col span={12} offset={6}>
              <Divider />
            </Col>

            <Col span={12} offset={6}>
              <h2 style={{ textAlign: "center" }}>Login (this is just for debugging)</h2>
              <Paragraph style={{ textAlign: "center" }}>
                Please provide a phone number you want to log in. This supports only Vietnamese phone numbers.
              </Paragraph>
              <Row>
                <Col span={12} offset={6}>
                  <Input placeholder="0381234567" prefix={<PhoneOutlined />} onChange={(e) => setPhone(e.target.value)} value={phone}/>
                  <Button onClick={doLogin} style={{ marginTop: "1rem" }} block>Login with Credify</Button>
                </Col>
              </Row>
            </Col>

            <Col span={12} offset={6}>
              <Divider />
            </Col>

          </Row>
        </Content>
        <Footer style={{ textAlign: 'center' }}>Credify Web SDK ©2022 Created by Credify Pte. Ltd.</Footer>
      </Layout>
    </>
  )
}

export default LoginPage