import React, { useState, useEffect, useCallback } from 'react';
import { Drawer, message } from 'antd';
import { UploadOutlined, RetweetOutlined } from '@ant-design/icons';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { getTexToSvg, checkQno, saveFileAndQno } from '../lib/api/tikz'; // Request api
import TikzForm from '../component/tikzForm';



const fetchTexToSvg = async (data) => {
	// getTexToSvg api를 이용하기 위한 const
	try {
		const result = await getTexToSvg({ tex: data });
		if (result.status === 200) {
			console.log(result.status);
			console.log(result.data);
			return result.data;
		}
	} catch (e) {
		console.log(e);
		//Notification. 추가해서 변환상태 알려주기
		return null;
	}
};


const fetchSaveData = async (data) => {
	try{
	  const result = await saveFileAndQno(data);
	  console.log(result);
	  if(result.status===200){
		return result.data;
	  }    
	}catch(e){
	  console.log(e);
	  message.warning(e.message);
	}
  }

/* 문항번호 체크 */
const fetchCheckQno = async(qno) => {
	try{
	  const result = await checkQno(qno);
	  if(result.status===200){
		console.log(result);
		message.info("사용 가능한 문항 번호 입니다.");
		return true;
	  }else{ 
		message.info("존재 하지 않는 문항 번호 입니다.");
		return false;
	  }
	}catch(e){
	  console.log(e);
	  message.info("존재 하지 않는 문항 번호 입니다.");
	  return false;
	}
  }


  const _tikzcode= "%   예시 (x축, y축, 반지름이 1cm인 원의 그림)   %\n\
%   오른쪽의 변환 버튼을 눌러보세요!   %\n\n\
 \\documentclass{article}\n\
 \\usepackage{tikz}\n\
 \\begin{document}\n\n\n\
 \\begin{tikzpicture}\n\
 \\draw (-1.5,0) -- (1.5,0);\n\
 \\draw (0,-1.5) -- (0,1.5);\n\
 \\draw (0,0) circle (1cm);\n\
 \\end{tikzpicture}\n\n\n\
 \\end{document}";
  
  
  const Tikz = ({ onLeave, visible, callback, selectItem, mode }) => {
	const [fields,setFields] =useState([]);
	const [qno, setQno] = useState(null);
	const [number, setNumber] = useState(null); //문항번호를 저장하는 state
	const [inputText, setinputText] = useState(_tikzcode); //tikz code를 저장하는 state
	const [svg, setSvg] = useState(null); //변환된 svg 데이터를 저장하는 state
	const [qnoCheck,setQnoCheck] = useState(false);
	const [tikzcode,setTikzCode] = useState(_tikzcode);
	//svg
	//onclickevent : Tikz 변환하기 Button의 onClick Event
	//onChangeTikz : TextArea 컴포넌트의 onChange event
	//onFinish : Form data를 제출하기 위한 event
	
	useEffect(()=> {
			if(mode==='preview'&&selectItem){
				console.log(selectItem);

				let initFields = [
					{name:['qno'],value:selectItem.qno},
					{name:['typeSol'],value:selectItem.typeSol},
					{name:['typeQue'],value:selectItem.typeQue},
					{name:['creator'],value:selectItem.creator},
				
				  ];
				  setQno(selectItem.qno);
				  setTikzCode(selectItem.tex);
				  setFields(initFields);
				  setSvg(null);
			}
	},[mode, selectItem]);

	useEffect(()=>{
		if(mode === 'new'){
			let initFields = [
				{name:['qno'],value:null},
				{name:['typeSol'],value:null},
				{name:['typeQue'],value:null},
				{name:['creator'],value:null},
			  ];
			  setQno(null);
			  setTikzCode(_tikzcode);
			  setFields(initFields);
			  setSvg(null);
		}
	},[mode]);

	const onClickEvent = (e) => {
		if(inputText){
			callbackSVG(inputText);
		}
		
		if (inputText === null) {
			console.log(inputText);
			alert(
				//data에 null이 입력된 경우
				'Code 값을 입력해주세요!'
			);
		} else {
			console.log(inputText);
			callbackSVG(inputText);
		}
	};
	const onChangeQno = (value) => {
		console.log(value);
		setQno(value);
		setFields([...fields, {name:['qno'],value:value}]);
	};
/*
	useEffect(()=>{
		if(!visible ){
		  let initFields = [
			{name:['qno'],value:null},
			{name:['typeSol'],value:null},
			{name:['typeQue'],value:null},
			{name:['creator'],value:null},
		  ];
		  setQno(null);
		  setTikzCode(tikzcode);
		  setFields(initFields);
		}
	  },[visible,mode]);
*/
	const callbackSVG = useCallback(async () => {
		const result = await fetchTexToSvg(inputText);
		setSvg(result); //api로 받아온 result를 svg state에 저장
	}, [inputText]);

	const onChangeTikz = (e) => {
		if (e) {
			setinputText(e.target.value);
		} else setinputText(null);
	};

	const onSaveEvent = () => {
		try {
			//서버에 저장이 확인 됐을때  200, 500(오류) http status
			const result = alert('전송이 성공적으로 완료됐습니다.');
		} catch (e) {
			//서버에 저장 오류가 났을때
			console.log(e);
			alert(e);
		}
	};
	const onClickQno = async(e)=>{
		e.preventDefault();
		//번호가 호출 성공시 setQnoCheck(true);
		if(qno){
		  const _checkQno= await fetchCheckQno(qno);
		  setQnoCheck(_checkQno);
		}
	  };
	

	const onFinish = async(values) => {
		console.log(values);
		console.log(qnoCheck);
		if(!qnoCheck){
		  message.warning("문제 번호를 확인해 주세요.")
		  return;
		}else{
			const creator = sessionStorage.getItem('id');
			console.log('Received values of form: ', values); 
			const result = await fetchSaveData({...values, creator});
			console.log(result);
			if(result){
			  message.info(result.message);
			  let initFields = [
				{name:['qno'],value:null},
				{name:['typeSol'],value:null},
				{name:['typeQue'],value:null},
				{name:['creator'],value:null},
			  ];
			  setFields(initFields);
			  onLeave();
			  callback({status:'SAVE_OK'});
			  setQno(null);
			}else{
				callback({status:'SAVE_FAIL'})
			} 
		}
	};

	
	const onChangeTypeSol = (value) => {
		console.log(value);
		setFields([...fields, {name:['typeSol'],value:value}]);
	}
	
	const onChangeTypeQue = (value) => {
		console.log(value);
		setFields([...fields, {name:['typeQue'],value:value}])
	}

	return (
		<Drawer
			title={'Tikz Editor'}
			placement={'bottom'}
			closable={true}
			height={'90vh'}
			onClose={onLeave}
			visible={visible}>
			<TikzForm
				svg={svg}
				onClickEvent={onClickEvent}
				onChangeTikz={onChangeTikz}
				onSaveEvent={onSaveEvent}
				onFinish={onFinish}
				tikzcode={tikzcode}
				fields={fields}
				onClickQno={onClickQno}
				onChangeQno={onChangeQno}
				onChangeTypeSol={onChangeTypeSol}
				onChangeTypeQue={onChangeTypeQue}
				qno={qno}>
			</TikzForm>
		</Drawer>
	);
};

export default Tikz;

//<Transform value={tikzHtml}></Transform>