// const taxnomy = [
//     {
//         name : '栄養摂取を支援',
//         slug : 'nutrition',
//         term : [
//             {
//                 'name' : '飲む',
//                 'slug' : 'nutrition01',
//             },
//             {
//                 'name' : '食べる',
//                 'slug' : 'nutrition02',
//             },
//             {
//                 'name' : '混ぜる・溶かす',
//                 'slug' : 'nutrition03',
//             },
//         ]
//     },
// ]

// const post = [
//     [
//         {
//             label:'',
//             value:''
//         },
//         {
//             title:'',
//             value:''
//         },
//         {
//             title:'',
//             value:''
//         }
//     ],
//     [
//         {
//             label:'',
//             value:''
//         },
//         {
//             title:'',
//             value:''
//         },
//         {
//             title:'',
//             value:''
//         }
//     ],
// ]

// const post_header = [
//     '商品名',
//     'エネルギー',
//     '水',
//     'プロテイン'
// ]


const { useState,useEffect,useRef,useCallback} = React;

const eiyouHeaderExample = [
    'header','エネルギー（kcal）','水分（g）','たんぱく質（g）','脂質（g）','炭水化物（g）','―糖質（g）','―食物繊維（g）','灰分（g）','ナトリウム（mg）','カリウム（mg）','カルシウム（mg）','マグネシウム（mg）','リン（mg）','鉄（mg）','亜鉛（mg）','銅（mg）','マンガン（mg）','ヨウ素（μg）','セレン（μg）','クロム（μg）','モリブデン（μg）','塩素（mg）','イオウ（g）','ビタミンA（μg）','ビタミンD（μg）','ビタミンE（mg）','ビタミンK（μg）','ビタミンB1（mg）','ビタミンB2（mg）','ナイアシン（mg）','ビタミンB6（mg）','ビタミンB12（μg）','葉酸（μg）','パントテン酸（mg）','ビオチン（μg）','ビタミンC（mg）','コリン（mg）','乳糖（g）','食塩相当量（g）'
];

const butsuseiHeaderExample = [
    '硬さ（N/m²）','付着性（J/m³）','凝集性','測定温度','付着性（J/m³)'
];

const meisyouHeaderExample = [
    '賞味期限','GTINコード','荷姿','内容量','単品寸法','単品重量','ケース寸法','ケース重量','原材料名','アレルギー28品目','賞味期間','原材料','単品サイズ','ケースサイズ','アレルギー27品目'
];

/**
 * 
 * @param {object} obj オブジェクトの中にプロパティの値が配列かどうか
 * @returns {boolean}
 */
const isEmptyObj = (obj)=> {
for(const array of Object.values(obj)){
    if(array.length !== 0){
    return false;
    }
}
// console.log(obj);
return true;
}


/**
 * 配列を参考に配列をソート
 * @param {*} array 
 * @param {*} exampleArray 
 * @returns {Array}
 */
const sortArray = (array,exampleArray) => {
    let correctArray = [];
    let incorrectArray = [];
    array.map((item)=>{
        if(exampleArray.includes(item)){
            correctArray = [...correctArray,item];
        }else{
            incorrectArray = [...incorrectArray,item];
        }
    });
    correctArray.sort((x,y)=>{
        if(exampleArray.indexOf(x)){}
        return exampleArray.indexOf(x) - exampleArray.indexOf(y);
    });

    return [...correctArray,...incorrectArray];
}

const App = () => {
    const [postHeader,setPostHeader] = useState([]);//栄養素ヘッダー、物性ヘッダー、名称ヘッダーを束ねたもの。
    const [post,setPost] = useState([]);

    const [freeWord,setFreeWord] = useState('');
    const [postType,setPostType] = useState('care');
    const [taxnomy,setTaxnomy] = useState([]);
    const [selectedTaxnomy,setSelectedTaxnomy] = useState([]);
    const [loading,setLoading] = useState(false);

    const tableEl = useRef(null);

    const query = {
        free_word:freeWord,
        post_type:postType,
        selected_taxnomy:selectedTaxnomy,
    }

    const resetTerm = () => {
        setSelectedTaxnomy([]);
    }

    useEffect(()=>{
        setLoading(true);
        axios.post(`${window.location.origin}/0foricasm/wp-content/themes/forica05/check/check.php`,query,{
            headers:{
                'Access-Control-Allow-Origin': '*',
                'content-type': 'Access-Control-Allow-Headers'
            }
        }).then((response)=>{
            
            console.log(response.data);

            //項目名の並び順を変更
            // console.log(response.data.post_header);
            const eiyou_header = response.data.eiyou_header;
            const butsusei_header = response.data.butsusei_header;
            const meisyou_header = response.data.meisyou_header;


            const newHeader = ['header',...response.data.eiyou_header,'物性値',...response.data.butsusei_header,'その他製品情報',...response.data.meisyou_header,]
            // const newHeaderArray = sortArray(response.data.post_header,postHeaderExample);
            // console.log(response.data.post_header);
            
            setPostHeader(newHeader);
            setPost(response.data.post);

            setTaxnomy(response.data.taxnomy);
            //ローディング終了
            setLoading(false);
        }).catch((error)=>{
            console.log('error');
            const { status, statusText } = error.response;
            setLoading(false);
            console.log(`Error! HTTP Status: ${status} ${statusText}`);
        });
    },[freeWord,postType,selectedTaxnomy]);


    return (
        <React.Fragment>
            <Loading loading={loading} />
            <SearchByFreeWord setFreeWord={setFreeWord} />
            <SelectPostType postType={postType} setPostType={setPostType} resetTerm={resetTerm} />
            <SelectTaxnomy taxnomy={taxnomy} selectedTaxnomy={selectedTaxnomy} setSelectedTaxnomy={setSelectedTaxnomy} />
            <ItemList post={post} postHeader={postHeader} tableEl={tableEl} />
        </React.Fragment>
    )
}


const SearchByFreeWord = (props)=>{
    const {setFreeWord} = props;

    const freewordsEl = useRef(null);

    const submit = ()=>{
        const newFreeWord = freewordsEl.current.value;
        setFreeWord(newFreeWord);
        document.querySelector('.p-check').scrollTop = 0;
        document.querySelector('.p-check').scrollLeft = 0;
    }

    //空になったら自動で送信されるようにする。
    const onChangeFreeWord = (e) => {
        if(e.target.value === ''){
            submit();
        }
    }

    const keyPress = (e) =>{
        if(e.keyCode === 13){
            submit();
        }
    }

    return (
        <div className="freeWord-track">
            <div className="freeWord-wrap">
                <div className="freeWord">
                    <input type="search" className="freeWord__input" placeholder="製品名・JANコードで検索" onChange={onChangeFreeWord} ref={freewordsEl} onKeyDown={(e)=> keyPress(e)} />
                    <button type="submit" className="freeWord__btn" aria-label="検索" onClick={submit}>検索</button>
                </div>
            </div>
        </div>
    )
}


const SelectPostType = (props)=>{
    const {postType,setPostType,resetTerm} = props;
    const postTypeList = [
        {
            label:'治療食・介護食',
            slug:'care'
        },
        {
            label:'災害食・非常食',
            slug:'rescue'
        },
        {
            label:'業務用、その他',
            slug:'can'
        }
    ];

    const handleChange = (e)=>{
        setPostType(e.target.value);
        document.querySelector('.p-check').scrollTop = 0;
        document.querySelector('.p-check').scrollLeft = 0;
    }

    return (
        <div className="postType-track">
            <div className="postType-wrap">
                {
                    postTypeList.map((item,index)=>{
                        return (
                            <label className="postType" onChange={handleChange}>
                                <input type="radio" name="posttype" value={item['slug']} checked={postType === item['slug'] && true} onChange={resetTerm} />
                                <span className="postType__icon"></span>
                                <span className="postType__text">{item['label']}</span>
                            </label>
                        )
                    })
                }
            </div>
        </div>
    )
}


const SelectTaxnomy = (props)=>{
    const {taxnomy,selectedTaxnomy,setSelectedTaxnomy} = props;
    return (
        <div className="taxnomy-track">
            <div className="taxnomy-wrap">
                {
                    taxnomy.map((taxnomyItem,index)=>{
                        return (
                            <div className="taxnomy" key={`key_${index}`}>
                                <div className="taxnomy__head"><button className="taxnomy__btn" type="button">{taxnomyItem['label']}</button></div>
                                <div className="taxnomy__body">
                                    <SelectTerm slug={taxnomyItem['slug']} term={taxnomyItem['term']} selectedTaxnomy={selectedTaxnomy} setSelectedTaxnomy={setSelectedTaxnomy} />
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
};

// const selectedTaxnomy = [
//     {
//         slug:'nutrition',
//         term:['nutrition01','nutrition02']
//     },
//     {
//         slug:'chew',
//         term:['chew01','chew02']
//     },
// ]

// const taxnomy = [
//     {
//         name : '栄養摂取を支援',
//         slug : 'nutrition',
//         term : [
//             {
//                 'name' : '飲む',
//                 'slug' : 'nutrition01',
//             },
//             {
//                 'name' : '食べる',
//                 'slug' : 'nutrition02',
//             },
//             {
//                 'name' : '混ぜる・溶かす',
//                 'slug' : 'nutrition03',
//             },
//         ]
//     },
// ]

// const termItem ={
    // 'name' : '飲む',
    // 'slug' : 'nutrition01',
// }

const SelectTerm = (props)=>{
    const {slug,term,selectedTaxnomy,setSelectedTaxnomy} = props;//ここのtermはselectedTaxonomyのではなく、taxonomyのterm。存在する商品に付いているtermということ。
    const handleChange = e => {
        
        if(e.target.checked){
            const newSelectedTaxnomy = [...selectedTaxnomy];
            if(newSelectedTaxnomy.length === 0){
                newSelectedTaxnomy.push(
                    {
                        slug:slug,
                        term:[e.target.value]
                    }
                );
            }else{
                //スラッグと一致するもののオブジェクトを検索
                const target = newSelectedTaxnomy.find((item) => item['slug'] === slug);
                if(target !== undefined){//オブジェクトがあった場合
                    target['term'].push(e.target.value);
                }else{
                    newSelectedTaxnomy.push(
                        {
                            slug:slug,
                            term:[e.target.value]
                        }
                    );
                }
            }
            setSelectedTaxnomy(newSelectedTaxnomy);
        }else{
            const newSelectedTaxnomy = [...selectedTaxnomy];
            newSelectedTaxnomy.map((item)=>{
                if(item['slug'] === slug){
                    item['term'] = item['term'].filter(n => n !== e.target.value);
                }
            });
            setSelectedTaxnomy(newSelectedTaxnomy);
        }
        document.querySelector('.p-check').scrollTop = 0;
        document.querySelector('.p-check').scrollLeft = 0;
    }

    const handleCheck = slug => {
        let flag = false;
        selectedTaxnomy.map((item)=>{
            if(item['term'].includes(slug)){
                flag = true;
            }
        });
        return flag;
    }

    return (
        <div className="checkbox-wrap">
            {
                term.map((termItem,index)=>{
                    return (
                        <label className="checkbox" key={`key_${index}`}>
                            <input type="checkbox" value={termItem['slug']} checked={handleCheck(termItem['slug'])} onChange={handleChange} />{termItem['label']}
                            <div className="checkbox__icon"></div>
                        </label>
                    )
                })
            }
        </div>
    )
};




const ItemList = (props) => {
    const {post,postHeader,tableEl} = props;

    // console.log(tableEl.current);
    return (
        <div className="itemList">
            <div className="itemList__inner" ref={tableEl}>
                <table>
                    {
                        postHeader.map((postHeaderItem)=>{
                            return (
                                <tr>
                                    {
                                        (() => {
                                            if(postHeaderItem === 'header'){
                                                return (
                                                    <th>栄養成分表示</th>
                                                )
                                            }else if(postHeaderItem === '物性値'){
                                                return (
                                                    <th className="sub-title">物性値</th>
                                                )
                                            }else if(postHeaderItem === 'その他製品情報'){
                                                return (
                                                    <th className="sub-title">その他製品情報</th>
                                                )
                                            }else{
                                                return (
                                                    <th>{postHeaderItem}</th>
                                                )
                                            }
                                        })()
                                    }
                                    {
                                        post.map((postItem,index)=>{
                                            let roop = 0;
                                            let hit = 0;

                                            return(
                                                postItem.map((obj)=>{
                                                    // console.log(`${obj['label']}:${postHeaderItem}`);
                                                    roop++;
                                                    if(obj['label'] === postHeaderItem){
                                                        hit++;
                                                        if(obj['label'] === 'header'){
                                                            return(
                                                                <td>
                                                                    <div className="head">
                                                                        <a href={obj['value']['link']}>
                                                                            <div className="head__image">
                                                                                <img src={obj['value']['image']} alt="" />
                                                                            </div>
                                                                            <div className="head__title">{obj['value']['title'].replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'')}</div>
                                                                            <div className="head__jan">
                                                                                <div className="head__jan-title">JANコード</div>
                                                                                <div className="head__jan-num">{obj['value']['jan']}</div>
                                                                            </div>
                                                                        </a>
                                                                    </div>
                                                                </td>
                                                            )
                                                        }else{
                                                            return (
                                                                <td>{obj['value']}</td>
                                                            )
                                                        }
                                                    }else if(postItem.length === roop && hit === 0){
                                                        if(postHeaderItem === '物性値' || postHeaderItem === 'その他製品情報'){
                                                            return (
                                                                <td className="no-border">&nbsp;</td>
                                                            )
                                                        }else{
                                                            return <td>&nbsp;</td>
                                                        }
                                                    }
                                                })
                                            );
                                        })
                                    }
                                </tr>
                            )
                        })
                    }
                </table>
            </div>
        </div>
    )
}

/*---------------------------------------------------------------------------
ローディング
---------------------------------------------------------------------------*/
const Loading = (props) => {
  const {loading} = props;
  const className = loading ? 'is-loading' : '';

  return (
    <div className={'c-loading '+className}>
      <div className="c-loading__icon"></div>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector("#react_container"));