import React, {Component} from 'react';
import './style.css';
import {Link} from 'react-router-dom';

import {withTranslation} from 'react-i18next';
import i18next from 'i18next';

class Footer extends Component {
  constructor() {
    super();
    this.state = {
      defaultLang: 'id',
    };
  }
  handleClick(lang) {
    i18next.changeLanguage(lang);
  }

  changeHandler() {
    this.props.testAlihBahasa();
    this.handleClick(this.props.testClick);
  }
  render() {
    const {t} = this.props;

    return (
      <React.Fragment>
        {console.log('from footer', this.state.defaultLang)}
        <div className="footer-cont">
          <div className="footer-desc-1">
            <div className="footer-desc-2">
              <div className="footer-title">
                <Link to="/">HEKSA</Link>
              </div>
              <Link to="/">{t('Home.1')}</Link>
              <Link to="/">{t('Product.1')}</Link>
              <Link to="/">{t('Setup.1')}</Link>
              <Link to="/">{t('Guarantee.1')}</Link>
              <Link to="/">{t('Quota.1')}</Link>
            </div>
            <div className="footer-desc-3">
              <button onClick={() => this.changeHandler()}>Indonesian</button>
              <button onClick={() => this.changeHandler()}>English</button>
            </div>
          </div>
          <div className="app-footer-line">
            <hr />
          </div>
          <div className="app-footer-social-media">
            <p>{t('Follow.1')}</p>
            <div className="app-footer-icon">
              <p>Icon</p>
            </div>
          </div>
          <div className="footer-desc">
            <p>Indonesia</p>
            <p>Copyright © 2020 Heksa. All Rights Reserved.</p>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default withTranslation()(Footer);