import React, {Component} from 'react';
import './../HomeScreen/style.css';
import Header from './../../Components/CHeader.web';
import Footer from './../../Components/CFooter.web';
import Button from './../../Components/CButton.web';
import {banner, pict1, maps, modem} from './../../Assets';
import {Link} from 'react-router-dom';
import axios from 'axios';

import {withTranslation} from 'react-i18next';

class Layout extends Component {
  constructor() {
    super();
    this.state = {
      defaultLang: 'id',
    };
  }
  render() {
    return (
      <React.Fragment>
        <Header />
        {this.props.children}
        <Footer
          testClick={this.props.cobaClick}
          testAlihBahasa={this.props.cobaGantiBahasa}
        />
      </React.Fragment>
    );
  }
}

class HomeScreen extends Component {
  constructor() {
    super();
    this.state = {
      defaultLang: 'id',
      dataEn: [
        {
          id: 1,
          title: '7 Days money back guarantee',
        },
        {
          id: 2,
          title: 'High speed internet connection.',
        },
      ],

      dataId: [
        {
          id: 1,
          title: 'Garansi 7 Hari Uang Kembali',
        },
        {
          id: 2,
          title: 'Kecepatan Koneksi internet Yang Tinggi',
        },
      ],
    };
  }

  componentDidMount() {
    const config = {
      'x-api-key': '4b05b3250dd3c108f46284d6dd208897',
      'X-localization': 'en',
    };
    axios
      .get(`http://homelte-api-contents.staging11.salt.id/v1/campaign/258`, {
        headers: config,
      })
      .then(res => {
        console.log(res.data);
      });
  }

  alihBahasa = () => {
    if (this.state.defaultLang === 'id') {
      this.setState({
        defaultLang: 'en',
      });
    } else {
      this.setState({
        defaultLang: 'id',
      });
    }
  };

  render() {
    const {t} = this.props;
    return (
      <React.Fragment>
        {console.log('from body', this.state.defaultLang)}
        <Layout
          cobaClick={this.state.defaultLang}
          cobaGantiBahasa={this.alihBahasa}>
          <div className="app-content">
            <div className="app-banner-home-cont">
              <img className="app-banner-home" src={banner} alt="banner" />
              <div className="app-banner-text">
                Parental Control on your fingertips.
              </div>
            </div>
            <div className="app-content-title-top">
              <p>{t('Feature.1')}</p>
            </div>
            <div className="app-content-home">
              {this.state.defaultLang === 'id'
                ? this.state.dataEn.map(item => {
                    return (
                      <div className="app-content-home-card">
                        <img
                          className="app-content-image"
                          src={pict1}
                          alt="img1"
                        />
                        <p>{item.title}</p>
                      </div>
                    );
                  })
                : this.state.dataId.map(item => {
                    return (
                      <div className="app-content-home-card">
                        <img
                          className="app-content-image"
                          src={pict1}
                          alt="img1"
                        />
                        <p>{item.title}</p>
                      </div>
                    );
                  })}

              {/* {this.state.dataEn.map(item => {
                return (
                  <div className="app-content-home-card">
                    <img className="app-content-image" src={pict1} alt="img1" />
                    <p>{item.title}</p>
                  </div>
                );
              })} */}
              <br />
              <div className="app-content-home-coverage">
                <p>{t('DedicatedNetwork.1')}</p>
                <img className="app-content-image-maps" src={maps} alt="img2" />
                <Link to="/coverage">
                  <div className="app-button-home">
                    <Button label={'CHECK COVERAGE'} />
                  </div>
                </Link>
              </div>
              <div className="app-content-title-bottom">
                <p>{t('BrowseDevice.1')}</p>
              </div>
              <div className="app-content-home-card-bottom">
                <div className="app-content-home-card-bottom-title">
                  <p>Modem Basic</p>
                </div>
                <div className="app-content-home-card-bottom-detail">
                  <div>
                    <span>
                      <p>Special Price.</p>
                    </span>
                    <p>Rp.1,799,000</p>
                    <br />
                    <Link to="/">VIEW DETAIL</Link>
                  </div>
                  <img className="app-content-image" src={modem} alt="img3" />
                </div>
              </div>
              <br />
              <div className="app-content-home-setup">
                <p>{t('SetupHeksa.1')}</p>
                <div className="app-content-home-card-setup">
                  <img
                    className="app-content-home-card-setup-img"
                    src={modem}
                    alt="modem"
                  />
                  <h5>STEP 01</h5>
                  <span>Unbox Router</span>
                  <p>
                    Unboxing HEKSA router and check the completeness of the
                    products in the router box
                  </p>
                </div>
              </div>
              <br />
            </div>
          </div>
        </Layout>
      </React.Fragment>
    );
  }
}

export default withTranslation()(HomeScreen);