import React, { useEffect, useState } from 'react'
import { Layout, Col, Row } from 'antd'
import { useAuth } from "react-oidc-context"

import AuthBar from './auth-bar'
import { myToDoListApi } from './to-do-list-api'
import ToDoForm from './to-do-form'
import ToDoTable from './to-do-table'

const { Header, Content } = Layout

function Home() {
    const [todos, setTodos] = useState([])
    const auth = useAuth()
    const access_token = auth.user.access_token

    useEffect(() => {
        handleToDos()
    }, [])

    const handleToDos = async () => {
        try {
            const response = await myToDoListApi.getToDos(access_token)
            setTodos(response.data)
        } catch (error) {
            handleLogError(error)
        }
    }

    const onFinish = async (addToDoRequest) => {
        try {
            await myToDoListApi.addToDo(addToDoRequest, access_token)
            await handleToDos()
        } catch (error) {
            handleLogError(error)
        }
    }

    const onComplete = async (key) => {
        try {
            await myToDoListApi.updateToDo(key, true, access_token)
            await handleToDos()
        } catch (error) {
            handleLogError(error)
        }
    }

    const onDelete = async (key) => {
        try {
            await myToDoListApi.deleteToDo(key, access_token)
            await handleToDos()
        } catch (error) {
            handleLogError(error)
        }
    }

    const handleLogError = (error) => {
        if (error.response) {
            console.log(error.response.data)
        } else if (error.request) {
            console.log(error.request)
        } else {
            console.log(error.message)
        }
    }

    const headerStyle = {
        textAlign: 'center',
        color: '#fff',
        backgroundColor: '#333',
        fontSize: '3em'
    }

    return (
        <Layout>
            <Header style={headerStyle}>MyToDoList</Header>
            <AuthBar />
            <Content>
                <Row justify="space-evenly">
                    <Col span={6}>
                        <ToDoForm
                            onFinish={onFinish}
                        />
                    </Col>
                    <Col span={17}>
                        <ToDoTable
                            todos={todos}
                            onComplete={onComplete}
                            onDelete={onDelete}
                        />
                    </Col>
                </Row>
            </Content>
        </Layout>
    )
}

export default Home
