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 DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function Index() {

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


  const [data, setData] = useState([]);
  const [report, setReport] = useState('');
  const [selectedcons, setSelectedCons] = useState('');
  const [graph, setGraph] = useState(false);

  const [startDate, setStartDate] = useState(null);
  const [validDates, setValidDates] = useState([]);

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

  useEffect(() => {
    async function fetchData() {
      // You can await here
      if(selectedcons !== "" && report !== "" && isDate() == true) {
        const result = await axios('https://fbssso.ts.bizside.biz/getDateToHaveData?construction_id=' + selectedcons + '&sheetname=' + report);
        setValidDates(result.data.record);
      }
    }
    fetchData();
  }, [report, selectedcons]);

  function getDateWithFormat(date) {
    var thisDate = date;
    var dd = String(date.getDate()).padStart(2, '0');
    var mm = String(date.getMonth() + 1).padStart(2, '0'); //January is 0!
    var yyyy = date.getFullYear();

    thisDate = yyyy + '-' + mm + '-' + dd
    return thisDate;
  }

  function setingReport(e){
    setReport(e.target.value);
    setStartDate(null);
  }

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

  function setingGraph(e){
    setGraph(e.target.checked);
  }

  function doGetReport(){
    if(report == "" || selectedcons == ""){
      alert("建設とレポートの両方を選択してください");
      return;
    }
    var url = "";
    if(startDate !== null){
      if(graph){
      url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons+ "&construction_date="+getDateWithFormat(startDate)+"&graph=true";
      }
      else{
        url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons+ "&construction_date="+getDateWithFormat(startDate);
      }
      downloadReport(url);
    }
    else {
      if(graph){
        url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons+"&graph=true";
        }
        else{
          url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons;
        }
        downloadReport(url);
    }
  }

  function downloadReport(url) {
    fetch(url)
      .then(async response => {
        //console.log(response.headers);
        const filename = response.headers
          .get("content-disposition")
          console.log(filename)
        //  .split('"')[1];
        const text = await response.text();
        //console.log(filename)
        //console.log(text)
        //return { filename, text };
      })
      .then(responseText => this.download(responseText))
      .catch(error => {
        //messageNotification("error", error.message);
        throw new Error(error.message);
      });
  }

  // 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.xls'); //or any other extension
  //     //  //document.body.appendChild(link);
  //     //  link.click();

  //     const filename = response.headers
  //         .get("content-disposition")
  //         .split('"')[1];
  //       const text = response.text();
  //       console.log(filename)
  //       console.log(text)
  //       //return { filename, text };
      
  //   });

  // }

  const checkAvilable = (date) => {
    if(validDates === undefined){
      return false;
    }
    var thisDate = getDateWithFormat(date);
    if(validDates.includes(thisDate)){
      return true;
    }
    else{
      return false;
    }
  };

  function isDownload() {
    if(isDate() === false && report !== '' && selectedcons !== '') {
      return true;
    }
    else{
      if(startDate !== null) {
        return true;
      }
    }
    return false;
  }

  function isDate() {
    if(report === 'BoxDisplacement' || report === 'MachineControl' || report === 'MachineSheet'){
      return true;
    }
    else {
      return false;
    }
  }

  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="select">レポート種類</CLabel>
                  </CCol>
                  <CCol xs="12" md="9">
                    <CSelect custom name="select" id="select" onChange={setingReport} value={report}>
                      <option value="">-- レポート種類 --</option>
                      <option value="BoxDisplacement">函体変位表</option>
                      <option value="MachineControl">オープンシールドマシン管理日報</option>
                      <option value="MachineSheet">オープンシールド機変位表</option>
                      <option value="Measurement">函底高・偏位量測定一覧表</option>
                      <option value="CheckSheet">工程内検査表</option>
                      <option value="Injection">裏込注入材料受払い簿</option>
                    </CSelect>
                  </CCol>
                </CFormGroup>
                {isDate() === true ? 
                <CFormGroup row>
                <CCol md="3">
                  <CLabel htmlFor="select">報告日</CLabel>
                </CCol>
                <CCol xs="12" md="9">
                <DatePicker
                  dateFormat="yyyy/MM/dd"
                  selected={startDate}
                  onChange={(date) => setStartDate(date)}
                  filterDate={checkAvilable}
                  placeholderText='日付を選択'
                  />
                </CCol>
              </CFormGroup>
              :
              <div></div>
                }

  {report == 'MachineControl' ?
    <CFormGroup variant="checkbox" className="checkbox">
      <CInputCheckbox
        id="checkbox1"
        name="checkbox1"
        checked = {graph}
        value='graph'
        onChange={setingGraph}
      />
      <CLabel variant="checkbox" className="form-check-label" htmlFor="checkbox1">グラフの有無</CLabel>
    </CFormGroup>
   :
  ("")}

              </CForm>
            </CCardBody>
            <CCardFooter>
            {isDownload() === true ?
            <CButton type="submit" size="sm" color="primary"  onClick={doGetReport}><CIcon name="cil-scrubber" /> ダウンロード</CButton>
            :
              <CButton disabled 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