import React, { useState } from 'react'
import Header from './components/Header';
import './style/Main.css';
require('dotenv').config();

const axios = require('axios');
const API_KEY = "1f14e860f7f53f39a4dfe0a2a919a8c7";
//process.env.api_key;
let imageFormData = new FormData();

export default function Main() {
    const [imgBase64, setImgBase64] = useState("");
    const [img, setImage] = useState(null);
    const handleChangeFile = (event) => {
        let reader = new FileReader();
        reader.onloadend = () => {
            const base64 = reader.result;
            if (base64) {
                setImgBase64(base64.toString());
            }
        }
        if (event.target.files[0]) {
            reader.readAsDataURL(event.target.files[0]); // 1. 파일을 읽어 버퍼에 저장합니다.
            setImage(event.target.files[0]); // 파일 상태 업데이트
        }
    }

    const analysisImage = () => {
        imageFormData.append('file', img);
        axios({
            method: 'post',
            url: "https://cors-anywhere.herokuapp.com/https://cv-api.kakaobrain.com/pose",
            headers: {
                'Authorization': `KakaoAK ${API_KEY}`,
                'Content-Type': 'multipart/form-data',
                'X-Requested-With': '*'
            },
            data: imageFormData
        }).then(function (response) {
            console.log(JSON.stringify(response.data));
        }).catch(function (error) {
            if (error.response) {
              // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.
              console.log(error.response.data);
              console.log(error.response.status);
              console.log(error.response.headers);
            }
            else if (error.request) {
              // 요청이 이루어 졌으나 응답을 받지 못했습니다.
              // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는
              // Node.js의 http.ClientRequest 인스턴스입니다.
              console.log(error.request);
            }
            else {
              // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.
              console.log('Error', error.message);
            }
            console.log(error.config);
          });
    }
    return (
        <div>
            <Header />
            <span>This is Main Page</span>
            <div className="Image-Preview-Container" style={{ "backgroundColor": "#efefef", "width": "400px", "height": "400px" }}>
                <img className="Image-Preview" alt="preview" src={imgBase64}></img>
            </div>
            <div className="Image_input">
                <input type="file" name="file" onChange={handleChangeFile} />
                <button type="button" onClick={analysisImage} />
            </div>
        </div>
    )
}