import React from 'react';
import {CSVLink, CSVDownload} from 'react-csv';
import Table from './Table.jsx';

import axios from 'axios';
import TranslateForm from './components/TranslateForm';
import TranslateOutput from './components/TranslateOutput';
//import './components/contextmenu.scss';
import './components/contextmenu.js'
import ContextMenu from "./components/contextmenu";
const key = "trnsl.1.1.20200108T112402Z.673445eef91fd0a3.1291a50e00d5c50e78cbf0ce86d6af81cd6cd831";

const csvHeaders1 = [
"Company","جهة الإتصال ","王玉普"
]
const csvData1 = [
  ['Alfreds Futterkiste'	,'Maria Anders',	'Germany'] ,
  ['Rathath IT', 'Abdennour TM' , 'تونس'] ,
  ['Sinopec', '王玉普' , '中国'],
  ['Auto1', 'Petter' , 'Germany'] ,
  ['Estifeda', 'Yousri K' , 'تونس'] ,
  ['Nine 10ᵗʰ', 'Amjed Idris' , 'المملكة العربية السعودية '] ,
  ['Tamkeen', 'Mohamed Alshibi' , 'المملكة العربية السعودية'] ,
  ['Packet Publishing', 'David Become' , 'UK'] ,
  ['Software hourse', 'Soro' , 'Poland']
];

const csvHeaders2 = [
  { label: 'First. Name', key: 'first.name' },
  { label: 'Last Name.', key: 'lastname' },
  { label: 'E.m.a.i.l.', key: 'email' }
];

const csvData2 = [
  { first:{name: 'Ahm.ed'}, lastname: 'Tomi', email: 'ah@smthing.co.com' },
  { first:{name: 'Raed'}, lastname: 'Lab.es', email: 'rl@smthing.co.com' },
  { first:{name: 'Yezzi'}, lastname: 'Min l3b', email: 'ymin@cocococo.com' }
];

const csvData3 = [
  { 'first.name': 'Ahm.ed', lastname: 'Tomi', email: 'ah@smthing.co.com' },
  { 'first.name': 'Raed', lastname: 'Lab.es', email: 'rl@smthing.co.com' },
  { 'first.name': 'Yezzi', lastname: 'Min l3b', email: 'ymin@cocococo.com' }
];

class App extends React.Component {
  state= {
    csvHeaders: csvHeaders1,
    csvData: csvData1,
    output: '',
    yandexFormVisible: false
  };
  getFileName() {
    if (!this.state.filename) return undefined;
    if (!this.state.filename.endsWith('.csv')) return this.state.filename + '.csv';
    return this.state.filename;
  }

  translate = (textToTranslate, language) => {
        axios.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key='+key+'&lang='+language+'&text='+textToTranslate)
            .then((response) => {
                var output = response.data.text[0];
                this.setState({ ...this.state, output: output });
            })
            .catch((error) =>
                console.log(error)
            );
    }

  showYandexForm = () => {
    console.log('ddupa');
    this.setState({
      ...this.state,
      yandexFormVisible: true
    });
  }

  render() {
    return (
      <div>
          <div ><h1>Pretty Example "React-csv"</h1></div>
          <div className="row">
              <div className="large-3 columns">
                  <a className="btn"
                  onClick={() => this.setState({csvHeaders: csvHeaders1, csvData: csvData1})}>
                      Sample Array Data
                  </a>
              </div>
              <div className="large-3 columns">
                  <a className="btn"
                  onClick={() => this.setState({csvHeaders: csvHeaders2, csvData: csvData2})}>Sample Object Data1</a>
              </div>
              <div className="large-3 columns">
                  <a className="btn"
                  onClick={() => this.setState({csvHeaders: csvHeaders2, csvData: csvData3})}>Sample Object Data2</a>
              </div>
              <div className="large-3 columns">
                  <a className="btn"
                  onClick={() => this.setState({csvHeaders: csvHeaders1, csvData: csvData2})}>Sample Object Data3</a>
              </div>
          </div>
          <div>
              <Table headers={this.state.csvHeaders} data={this.state.csvData} />
          </div>
          <div className="row">
              <div className="large-6 columns"></div>
              <div className="large-4 columns">
                  <input
                    onKeyUp={(e) => this.setState({filename: e.target.value})}
                    type="text" placeholder="File name"/>
              </div>
              <div className="large-2 columns">
                  <CSVLink
                    headers={this.state.csvHeaders}
                    data={this.state.csvData}
                    filename={this.getFileName()}
                    className="btn"
                  >
                    Export to CSV ⬇
                  </CSVLink>
              </div>
          </div>
          <div>
              <b>Header :</b>
              <div><pre>{JSON.stringify(this.state.csvHeaders, null, 2) }</pre></div>
              <b>Data : </b>
              <div><pre>{JSON.stringify(this.state.csvData, null, 2) }</pre></div>
          </div>
	      <div id="that"><ContextMenu showYandexForm={this.showYandexForm}/></div>
        {this.state.yandexFormVisible ? <TranslateForm translate={this.translate}/> : <div></div>}
        {this.state.yandexFormVisible ? <TranslateOutput output={this.state.output}/> : <div></div>}
      </div>

    );
  }
}

export default App;