import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
    CCol,
    CFormGroup,
    CInput,
    CInputFile,
    CLabel,
    CButton,
    CCard,
    CCardHeader,
    CCardBody,
    CCardFooter,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'


function Uploader(props) {

    const [file, setFile] = useState(null);
    
    function onChangeHandler(e) {
        setFile(e.target.files[0])
    }

    function onClickHandler(e) {
        let data = new FormData()
        data.append('file', file);
        const chk = file.name.trim();
        const collator = new Intl.Collator('ja'); 
        const order1 = collator.compare('ini_工程内検査票.xlsx', chk); 
        const order2 = collator.compare('ini_データ入力シート.xlsx', chk); 
        if(order1 === 0 || order2 === 0)
        {
            // axios.post("https://fsbsso.sumasen.net/upload?email=" + props.email, {
            //     body: data,
            //     headers: {'Content-Type': 'multipart/form-data' }
            // })
            axios.post("https://fsbsso.sumasen.net/upload?email=" + props.email, data, headers: {'Content-Type': 'multipart/form-data' })
            .then(res => { // then print response status
                //console.log(res.statusText)
                if (res.statusText == 'OK') {
                  alert("正常にアップロードされました");
                }
            });
        }
        else {
          alert("指定されたファイル名" + file.name + "が間違っています。ini_工程内検査表.xlsx または ini_データ入力シート.xlsx のどちらかに名前を変更してください。");
          return
        }
        //console.log(file.name);
        //console.log('calling upload');

    }

    return ( 
    <div>
        <CCard >
        <CCardHeader>
        アップロード
        </CCardHeader> 
        <CCardBody >
        <CFormGroup row>
        <CCol md = "3">
        <CLabel htmlFor = "date-input" > アップロードするファイルを選んでください < /CLabel> 
        </CCol > 
        <CCol xs = "12"md = "9" >
        <CInputFile type = "file"onChange = { onChangeHandler } id = "file-input" name = "file-input" / >
        </CCol> 
        </CFormGroup >
        <CCardFooter >
        <CButton type = "submit"
        onClick = { onClickHandler }
        size = "sm"
        color = "primary" > < CIcon name = "cil-scrubber" / > アップロード </CButton> 
        </CCardFooter>
        </CCardBody>
        </CCard>
        </div>
    )
}

export default Uploader