/* React */
import React, {useState, useMemo} from 'react';
import Annotator from "../Annotator"
import { HotKeys } from "react-hotkeys"
import useEventCallback from "use-event-callback"
import { defaultHotkeys } from "../HotkeyStorage/default-hotkeys"
import { useAppConfig } from "../AppConfig"

/* CSS */
import "antd/dist/antd.css";

/* AntD */
import { Layout, Row } from 'antd';
import * as common from '../libs/common';
import { ContactsOutlined } from '@ant-design/icons';

let p_images      = [];
let p_results     = [];
let regionClsList = [];
let activeImage   = null;
export let displayTools = [];

const MainPage = (props) => {
    const { fromConfig, setInConfig } = useAppConfig();
    const [selectedTool, changeSelectedTool] = useState("select");
    const [images, setImages] = useState([]);
    const [init_idx, setInitIdx] = useState(0);
    const [selectedIndex, changeSelectedIndex] = useState(init_idx);

    React.useEffect(() => {
        p_images    = [];
        p_results   = null;
        
        regionClsList = props.params.p_params.classes;
        p_images  = common.fn_getImages(props.params.p_params.images, regionClsList);
        p_results = props.params.p_params.results;

        displayTools = props.params.p_params.job_tp_cd;

        const img_setter = require('../libs/resultSetter');
        // p_images = img_setter.fn_getImages(p_images, p_results, regionClsList);
        setImages(p_images);

        const p_file_no = props.params.p_params.file_no;
        if(p_file_no && p_file_no > 0){
            for(let i = 0; i < p_images.length; i++){
                if(p_images[i].file_no === p_file_no){
                    changeSelectedIndex(i);
                    setInitIdx(i);
                    break;
                }
            }
        }else{
            changeSelectedIndex(0);
            setInitIdx(0);
        }

        return () =>{
            const reducer = require('../Annotator/reducers/general-reducer.js');
            reducer.clearCopyRegion();

            for(var i = 0; i < p_images.length; i++){
                URL.revokeObjectURL(p_images[i].src);
            }
        }
    }, []);

    React.useEffect(() => {
        const img_selector = require('../ImageSelectorSidebarBox/index');
        if(typeof img_selector.fn_SetTableScroll !== "function") return;
        img_selector.fn_SetTableScroll(selectedIndex);

        const main = require('../MainLayout/index');
        if(typeof main.getState !== "function") return;
        const output = main.getState();

        const saveResult = props.params.saveResult;

        if(typeof saveResult === "function"){
            saveResult(output.images_[selectedIndex].file_no);
        }

        const activeImage = output.images[0];
        // const activeImage = output.images[selectedIndex];
        const regions = activeImage.regions;
        let   selected_region_id = '';

        if(!regions) return;
        
        for(var i = 0; i < regions.length; i++){
            if(regions[i].highlighted){
                selected_region_id = regions[i].id;
                break;
            }
        }

        const reducer = require('../Annotator/reducers/general-reducer.js');
        reducer.setSelectedRegionId(selected_region_id);
    }, [selectedIndex]);

    React.useEffect(() => {
        const changedImages = props.params.changedImages;

        if(!changedImages || changedImages.length < 1){
            return;
        }

        const main = require('../MainLayout/index');
        if(typeof main.setFileAttr !== "function") return;

        if(changedImages.length > 1){
            let p_changedImages  = [];
            let p_changedResults = [];
            p_changedImages.push (changedImages[1]);
            p_changedResults.push(changedImages[1].job_rslt_cntnt);
    
            regionClsList = props.params.p_params.classes;
            activeImage = common.fn_getImages(p_changedImages, regionClsList)[0];
            // p_changedImages = common.fn_getImages(p_changedImages, regionClsList);
            const img_setter = require('../libs/resultSetter');
            // activeImage = img_setter.fn_getImages(p_changedImages, p_changedResults, regionClsList)[0];
        }else{
            let p_changedImages  = [];
            let p_changedResults = [];
            p_changedImages.push (changedImages[0]);
            p_changedResults.push(changedImages[0].job_rslt_cntnt);
    
            regionClsList = props.params.p_params.classes;
            activeImage = common.fn_getImages(p_changedImages, regionClsList)[0];
        }
        main.setFileAttr(changedImages, activeImage, props.params.p_params.classes);

        const img_selector = require('../ImageSelectorSidebarBox/index');
        img_selector.fn_Select(activeImage, selectedIndex);
    }, [props.params.changedImages]);
    
    const onNextImage = useEventCallback((output) => {
        if(selectedIndex + 1 >= images.length){
            // onExit(output, "go-to-next");
        }else{
            const main      = require('../MainLayout/index');
            const openAlert = props.params.openAlert;
            const img       = output.images[0];
            // const img       = output.images[selectedIndex];
            if(img.regions){
                for(var i = 0; i < img.regions.length; i++){
                    const region = img.regions[i];
                    if(!region.cls){
                        let params     = {};
                        params.title   = "Xaiplanet 확인";                     // 타이틀
                        params.msg_m   = "클래스가 지정되지 않은 객체가 있습니다.";   // 메세지내용
                        openAlert(params);
                        main.selectRegion(region);
                        return;
                    }
                }
            }

            changeSelectedIndex(selectedIndex + 1);

            // const activeImage = output.images[0];
            // const activeImage = output.images[selectedIndex + 1];
            // const img_selector = require('../ImageSelectorSidebarBox/index');
            // img_selector.fn_Select(activeImage, selectedIndex + 1);
            // img_selector.fn_Select(activeImage, selectedIndex + 1);
        }
    })

    const onPrevImage = useEventCallback((output) => {
        if(selectedIndex - 1 < 0){
            
        }else{
            const main      = require('../MainLayout/index');
            const openAlert = props.params.openAlert;
            const img       = output.images[0];
            if(img.regions){
                for(var i = 0; i < img.regions.length; i++){
                    const region    = img.regions[i];
                    if(!region.cls){
                        let params     = {};
                        params.title   = "Xaiplanet 확인";                     // 타이틀
                        params.msg_m   = "클래스가 지정되지 않은 객체가 있습니다.";   // 메세지내용
                        openAlert(params);
                        main.selectRegion(region);
                        return;
                    }
                }
            }


            changeSelectedIndex(selectedIndex - 1);
        }
    })

    /* AntD */
    const { Content } = Layout;

    const hotkeys = useMemo(
        () =>
        defaultHotkeys.map((item) => {
            if (fromConfig(`hotkeys.${item.id}`)) {
            return { ...item, binding: fromConfig(`hotkeys.${item.id}`) }
            } else {
            return item
            }
        }),
        [fromConfig]
    );

    const keyMaps = useMemo(() => {
        const keyMaps = {}
        for (const { id, binding } of hotkeys) {
        if (!binding) continue
        keyMaps[id] = binding
        }
        return keyMaps
    }, [hotkeys]);

    return (
        /* 화면 디자인 영역 */
        <Layout>
            <Content>
                <Row>
                    {/* 레이블링 */}
                    <HotKeys style={{ width: "100%"}}
                        keyMap={keyMaps}
                    >
                        {regionClsList && regionClsList.length > 0 && images && images.length > 0 ?
                        <Annotator
                            // onExit={onExit}
                            selectedImage={images && images.length > 0 ? images[0].src : null}
                            images={images}
                            onNextImage={onNextImage}
                            onPrevImage={onPrevImage}
                            selectedTool={selectedTool}
                            regionClsList={regionClsList}
                            changeSelectedIndex={changeSelectedIndex}
                            onStateChange={props.params.onChange}
                            selectedIndex={selectedIndex}
                            openAlert={props.params.openAlert}
                            init_idx={init_idx}
                            displayTools={displayTools}
                        />
                        :
                        null}
                    </HotKeys>
                </Row>
            </Content>
        </Layout>
    );
}

export default MainPage