import React, { useState } from 'react';
import { Link } from 'react-router-dom';
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 = process.env.REACT_APP_APIKEY;

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 = () => {
        let imageFormData = new FormData();
        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);
            }
            setAnalysisResult('error');
            console.log(error.config);
        });
    }
    return (
        <div className="MainPageContainer">
            <Header />
            <div className="ImagePreviewContainer">
                <img className="ImagePreview" alt="" src={imgBase64}></img>
                <div className="ImageInput">
                    <input type="file" name="file" onChange={handleChangeFile} />
                </div>
            </div>
            <div className="ImageInputSetting">
                <div className="PositionSelector">
                    <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>
                <div className="Caution">
                    <p>-- 이미지 업로드 시 유의사항 --</p>
                    <p>1. 업로드 되는 이미지는 JPEG, PNG 포맷만 지원합니다.</p>
                    <p>2. 업로드할 수 있는 이미지의 최대 용량은 2MB입니다.</p>
                    <p>3. 이미지의 권장 비율은 가로:세로 기준 16:9 ~ 9:16 입니다.</p>
                    <p>4. 이미지의 가로와 세로 길이는 320px~2048px 범위 내여야 합니다.</p>
                </div>
                <Link to="/result">
                    <button className="startBtn" type="button" onClick={analysisImage}>Submit</button>
                </Link>
            </div>
        </div>
    )
}