import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
  CCard,
  CCardBody,
  CCardHeader,
  CCol,
  CRow,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  /////
  CButton,
  CCardFooter,
  CForm,
  CFormGroup,
  CFormText,
  CTextarea,
  CInput,
  CInputFile,
  CInputCheckbox,
  CInputRadio,
  CLabel,
  CSelect,
  CSwitch
} from  '@coreui/react'
import CIcon from '@coreui/icons-react'
import Downloader from '../downloader';


const FileDownload = require('js-file-download');


function Index() {

  const baseUrl = "https://natnats.mobilous.com/";

  var today = new Date();

  var cdate = (today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();

  const [data, setData] = useState([]);
  const [sdate, setSdate] = useState(cdate);
  const [report, setReport] = useState('');
  const [selectedcons, setSelectedCons] = useState('');

  useEffect(() => {
    async function fetchData() {
      // You can await here
      const result = await axios('https://natnats.mobilous.com/getConstructionList');
      setData(result.data);
    }
    fetchData();
  }, []);

  function setingSDate(e){
    setSdate(e.target.value);
  }
  function setingReport(e){
    setReport(e.target.value);
  }

  function setingSelectedCons(e) {
    setSelectedCons(e.target.value);
  }

  function doGetReport(){
    if(report == "" || selectedcons == ""){
      alert("建設とレポートの両方を選択してください");
      return;
    }
    var url = baseUrl + "/" + report + "?construction_id=" +selectedcons+ "&construction_date="+sdate;
    console.log(selectedcons);
    console.log(sdate);
    console.log(report);
    downloadReport(url);
  }

  function downloadReport(url) {
    axios({
      url: url, //your url
      method: 'GET',
      responseType: 'blob', // important
    }).then((response) => {
       const url = window.URL.createObjectURL(new Blob([response.data]));
       const link = document.createElement('a');
       link.href = url;
       link.setAttribute('download', 'file.xlsx'); //or any other extension
       document.body.appendChild(link);
       link.click();
    });


    //return <Downloader iframeSrc={url} />
    // const response = axios(url).then((res) => {
    //   FileDownload(res.data, 'report.xls');
    // })
    //console.log(response);
  }

  return (
    <CRow>
      <CCol xs="12" sm="12" md="12">
        <CCard>
          <CCardHeader>
          レポート
          </CCardHeader>
          <CCardBody>

    <CSelect custom name="cons_select" id="cons_select" onChange={setingSelectedCons}>
      " <option value=''>-- 選択 --</option>"+
      {
        data.map((cc, index) => {
          return(
            <option key={cc.construction_id} value={cc.construction_id}>{cc.construction_name}</option>
          )
        })
      }
    </CSelect>


  <CCard>
            <CCardBody>
              <CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">
                <CFormGroup row>
                  <CCol md="3">
                    <CLabel htmlFor="date-input">日付 ({sdate})</CLabel>
                  </CCol>
                  <CCol xs="12" md="9">
                    <CInput type="date" id="date-input" name="date-input" placeholder="日付" value={sdate} onChange={setingSDate}/>
                  </CCol>
                </CFormGroup>
                <CFormGroup row>
                  <CCol md="3">
                    <CLabel htmlFor="select">選択</CLabel>
                  </CCol>
                  <CCol xs="12" md="9">
                    <CSelect custom name="select" id="select" onChange={setingReport} value={report}>
                      <option value="">-- 選択 --</option>
                      <option value="generateBoxDisplacement">函体変位表</option>
                      <option value="generateMachineControl">オープンシールドマシン管理日報</option>
                      <option value="generateMachineSheet">オープンシールド機変位表</option>
                      <option value="generateMeasurement">函底高・偏位量測定一覧表</option>
                      <option value="generateCheckSheet">工程内検査表</option>
                      <option value="generateInjection">裏込注入材料受払い簿</option>
                    </CSelect>
                  </CCol>
                </CFormGroup>


              </CForm>
            </CCardBody>
            <CCardFooter>
              <CButton type="submit" size="sm" color="primary"  onClick={doGetReport}><CIcon name="cil-scrubber" /> ダウンロード</CButton>
            </CCardFooter>
          </CCard>
          </CCardBody>
        </CCard>
      </CCol>
      <CCol xs="1" sm="1" md="1">
      </CCol>
    </CRow>
  );
}

export default Index