import React, { useState } from 'react'
import { useRecoilState, useSetRecoilState } from 'recoil';
import Header from './components/Header';
import Checkbox from './components/Checkbox';
import checkStraight from './AnalysisPose';
import { selectedPosState, analysisResultState } from './store/Global';
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 setAnalysisResult = useSetRecoilState(analysisResultState);
    const [selectedPosition, setPosition] = useRecoilState(selectedPosState);
    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) {
            const resdata = response.data[0].keypoints;
            console.log(resdata[0]);
            setAnalysisResult(checkStraight(resdata, 'front'));
        }).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} />
                <div className="position-selector">
                    <h3>전면 사진</h3>
                    <Checkbox checked={selectedPosition === "front"} onChange={(isChecked) => {isChecked ? setPosition('front') : setPosition(undefined)}}/>
                    <h3>측면 사진 - 왼쪽</h3>
                    <Checkbox checked={selectedPosition === "left"} onChange={(isChecked) => {isChecked ? setPosition('left') : setPosition(undefined)}}/>
                    <h3>측면 사진 - 오른쪽</h3>
                    <Checkbox checked={selectedPosition === "right"} onChange={(isChecked) => {isChecked ? setPosition('right') : setPosition(undefined)}}/>
                </div>
                <button type="button" onClick={analysisImage}>Submit</button>
            </div>
        </div>
    )
}