import React, { useState, useEffect } from 'react'
import { Alert, Col, Card, Container, Form, Row, Button, Nav, Navbar, ListGroup, Image, Table } from "react-bootstrap"
import axios from "axios"
import catchErrors from './utils/catchErrors.js'
import { Redirect } from 'react-router-dom'

const INIT_PAGE = {
    title: '',
    url: '',
}

function Bookmark() {
    const [page, setPage] = useState(INIT_PAGE)
    const [success, setSuccess] = useState(false)
    const [error, setError] = useState('')


    function handleChange(event) {
        const {title, value} = event.target
        setPage({...page, [title]: value})
    }

    async function handleSubmit(event) {
        event.preventDefault()
        try {
            setError('')
            const response = await axios.post('/api/users/bookmark ', page)
            console.log(response.data)
            console.log(page)
            // setUser(INIT_USER)
            setSuccess(true)
        } catch (error) {
            console.log(error)
            catchErrors(error, setError)
        }
    }

    const add_Page = [{
        title:'즐겨찾기1',
        url:'http://localhost:3000',
    }, {
        title:'즐겨찾기2',
        url:'https://www.naver.com/',
    }, {
        title:'즐겨찾기3',
        url:'https://www.youtube.com/watch?v=wo46N-LQK7o'
    }]

    return (
        <Container>
            <Navbar bg="primary" variant="dark">
                <Navbar.Brand href="/">북마크</Navbar.Brand>
                <Nav className="mr-auto">
                    <Nav.Link href="/">Home</Nav.Link>
                </Nav>
                {/* <Form inline>
                <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                <Button variant="outline-light">Search</Button>
            </Form> */}
            </Navbar>
                <Form>
                    <ListGroup>
                        <ListGroup.Item action href="">북마크1</ListGroup.Item>
                        <ListGroup.Item>북마크2</ListGroup.Item>
                    </ListGroup>
                </Form>
        </Container>
    )
}

export default Bookmark