// Cookieを設定する関数
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
      const date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value) + expires + "; path=/";
  }
  
  // Cookieを取得する関数
  function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }
  
  // Cookieを削除する関数
  function eraseCookie(name) {
    document.cookie = name + '=; Max-Age=-99999999;';
  }


const PublicationView = () => {
    const [mode, setMode] = useState(9);
    const [list, setList] = useState();
    const [show_list, setShowList] = useState();
    const [search_list, setSearchList] = useState();
    const [search, setSearch] = useState("");
    const [is_login, setIsLogin] = useState();
    const [currentPage, setCurrentPage] = useState(1);

    useEffect(() => {
        axios.get("login.php")
        .then((res)=>{
            
            if(res.data == false){
                setIsLogin(false);
            }else if(res.data == true){
                setIsLogin(true);
            }
        })
        .catch((e) => {
            console.log(e);
        })
    }, []);

    useEffect(() => {
        axios.get("list.php")
        .then((res) => {
            for(let data in res.data){
                res.data[data].content = JSON.parse(res.data[data].content); 
            }
            res.data = res.data.sort((a, b) => {
                // まず、publication_dateで比較
                if (parseInt(a.content.publication_date) < parseInt(b.content.publication_date)) return 1;
                if (parseInt(a.content.publication_date) > parseInt(b.content.publication_date)) return -1;

                if (a.date < b.date) return 1;
                if (a.date > b.date) return -1;
                
                // publication_dateが同じ場合、名前で比較
                return a.name.localeCompare(b.name);
              });
            setList(res.data);
            if(getCookie("mode")){
                setMode(getCookie("mode"));
                eraseCookie("mode");
            }
            
            
            if(parseInt(getCookie("offset"))){
                console.log(parseInt(getCookie("offset")));
                const timer = setTimeout(() => {
                    if(getCookie("offset")){
                        window.scrollTo({
                            top: parseInt(getCookie("offset")),
                            behavior: "smooth",
                        });
                        eraseCookie("offset");
                    }
                }, 100);
                return () => clearTimeout(timer);
            }else{
                window.scrollTo(0, 0);
            }
        }).catch((err) => {

        });
    }, []);

    useEffect(() => {
        updateShowList();
    }, [list])

    const updateShowList = () => {
        let temp = [];
        if(list){
            if(mode == 9){
                setShowList(list);
                setSearchList(list)
            }else{
                for(var data of list){
                    if(data.content.type == mode){
                        temp.push(data);
                    }
                }
                setShowList(temp);
                setSearchList(temp)
            }
            
            
        }
    }

    useEffect(() => {
        updateShowList();
    }, [mode]);

    


    const customStyle = {
        '--bulma-tabs-toggle-link-active-background-color': '#A1A38D',
        '--bulma-tabs-toggle-link-active-border-color': '#aaaaaa',
        display: "inline-block",
      };

    return(
        <div>
            {is_login && <a href="pubedit.html" style={{position: "fixed", bottom: "85px", right: "200px", zIndex: "10"}} class="button is-rounded is-success">追加</a>}
            <div className="columns is-mobile is-centered">
                <div className="column is-8-desktop is-10-tablet is-11-mobile" style={{textAlign: "center"}}>
                    <div style={{marginBottom: "30px"}}>
                        <input class="input" type="text" placeholder="Search" style={{width: "50%"}} value={search} onChange={e => setSearch(e.target.value)} />
                        <button class="button" onClick={() => {
                            console.log(search);
                            if(!search || search == ""){
                                setSearchList(show_list)
                            }else{
                                let temp = [];
                                for(var data of show_list){
                                    if(data.content.author && data.content.author.toLowerCase().includes(search.toLowerCase())){
                                        temp.push(data);
                                    }
                                    if(data.content.conference && data.content.conference.toLowerCase().includes(search.toLowerCase())){
                                        temp.push(data);
                                    }
                                    if(data.content.publication_date && data.content.publication_date.toLowerCase().includes(search.toLowerCase())){
                                        temp.push(data);
                                    }
                                    if(data.content.title && data.content.title.toLowerCase().includes(search.toLowerCase())){
                                        temp.push(data);
                                    }
                                    if(data.content.journal && data.content.journal.toLowerCase().includes(search.toLowerCase())){
                                        temp.push(data);
                                    }
                                }
                                setCurrentPage(1);
                                setSearchList(temp);
                            }
                        }}>Search</button>
                    </div>
                    <div className={"toggle-parent"}>
                        <div className={"tabs is-toggle is-toggle-rounded is-success"} style={customStyle}>
                            <ul>
                                <li className={mode == 9 ? "is-active" : ""} >
                                <a onClick={() => {setMode(9);setCookie("mode", 9);setCookie("page", 1);setCookie("offset", 0);}} className="is-primary">
                                    <span className="icon is-small"><i className="fas fa-file-alt"></i></span>
                                    <span>すべて</span>
                                </a>
                                </li>
                                <li className={mode == 0 ? "is-active" : ""} >
                                <a onClick={() => {setMode(0);setCookie("mode", 0);setCookie("page", 1);setCookie("offset", 0);}} className="is-success">
                                    <span className="icon is-small"><i className="fas fa-file-alt"></i></span>
                                    <span>学術論文</span>
                                </a>
                                </li>
                                <li className={mode == 1 ? "is-active" : ""}>
                                <a onClick={() => {setMode(1);setCookie("mode", 1);setCookie("page", 1);setCookie("offset", 0);}}>
                                    <span className="icon is-small"><i className="fas fa-plane-departure"></i></span>
                                    <span>国際会議論文</span>
                                </a>
                                </li>
                                <li className={mode == 2 ? "is-active" : ""}>
                                <a onClick={() => {setMode(2);setCookie("mode", 2);setCookie("page", 1);setCookie("offset", 0);}}>
                                    <span className="icon is-small"><i className="fas fa-university"></i></span>
                                    <span>国内会議</span>
                                </a>
                                </li>
                                <li className={mode == 3 ? "is-active" : ""}>
                                <a onClick={() => {setMode(3);setCookie("mode", 3);setCookie("page", 1);setCookie("offset", 0);}}>
                                    <span className="icon is-small"><i className="fas fa-award"></i></span>
                                    <span>受賞</span>
                                </a>
                                </li>
                                <li className={mode == 5 ? "is-active" : ""}>
                                <a onClick={() => {setMode(5);setCookie("mode", 5);setCookie("page", 1);setCookie("offset", 0);}}>
                                    <span className="icon is-small"><i class="fas fa-cog"></i></span>
                                    <span>特許</span>
                                </a>
                                </li>
                                <li className={mode == 4 ? "is-active" : ""}>
                                <a onClick={() => {setMode(4);setCookie("mode", 4);setCookie("page", 1);setCookie("offset", 0);}}>
                                    <span className="icon is-small"><i className="fas fa-sticky-note"></i></span>
                                    <span>その他</span>
                                </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div style={{marginBottom: "20px"}}>
                    {search_list && <PaginatedList list={search_list} itemsPerPage={12} mode={mode} currentPage={currentPage} setCurrentPage={setCurrentPage}/>}
                    {/* {
                        search_list && search_list.map((elem) => (
                            <Card data={elem}/>
                        ))
                    } */}
                    </div>
                </div>
            </div>
        </div>
    );
}