import React, { Component } from 'react';
import {
  Nav, NavLink, NavItem, Card, Button, CardTitle, CardText, CardDeck,
  CardSubtitle, CardBody,
} from 'reactstrap';
import axios from 'axios';
import { Link } from 'react-router-dom';


class BodySurveyView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
    };
    [
      'handleClick',
    ].forEach((v) => { this[v] = this[v].bind(this); });
  }

  componentDidMount() {
    const datas = [
      {
        username: 'radiancesoft.sby@gmail.com',
        password: 'warpin1234567890',
      },
    ];
    axios({
      method: 'post',
      url: 'https://oc6tq8iop5.execute-api.ap-southeast-1.amazonaws.com/dev/opening/interview',
      headers: {
        'Content-Type': 'application/json',
        'x-api-key': 'TUMYmAEXi22OkOnHx8fzoa3F3nR5traDRdcuBy31',
        'Access-Control-Allow-Origin': true,
      },
      data: JSON.stringify(datas),
    })
      .then((data) => {
        this.setState({ items: data.data });
        console.log(data);
      });
  }
  /* eslint-disable react/no-unused-state */
  handleClick(item) {
    console.log('mitra_id: ', item.mitraId);
    this.setState({ Data: item.mitraId });
  }
  /* eslint-enable react/no-unused-state */
  renderData() {
    const data = this.state.items.map(item => (
      <CardDeck key={item.id}>
        <Card>
          <CardBody>
            <CardTitle><div className="text-right">Mitra ID :</div> <p className="text-left"> {item.mitraId}</p></CardTitle>
            <CardSubtitle><p className="text-right">name :</p> <p className="text-left"> {item.mitra_name} </p></CardSubtitle>
            <CardText><p className="text-right">lokasi Warung :</p> {item.lokasi_warung} </CardText>
            <CardText><p className="text-right"> Nama Mitra :</p> {item.nama_mitra} </CardText>
            <Link
              to={{
              pathname: '/BodySurveyForm',
              state: { Data: item.mitraId, Datas: item.mitra_name, DataName: item.nama_mitra },
            }}
            >
              <Button
                id="send"
              >
              Survey Sekarang
              </Button>
            </Link>
          </CardBody>
        </Card>
      </CardDeck>));
    return data;
  }


  /* eslint-disable react/no-sequences */
  render() {
    return (
      <div className="comp-body-leads-view">
        <div className="card card-body-user-are">
          <Nav className="nav-fill nav-fill-compact">
            <NavItem className="text-left">
              <NavLink className="pl-0"> List Survey </NavLink>
            </NavItem>
          </Nav>
          {this.renderData()}
        </div>
      </div>
      /* eslint-enable react/no-sequences */
    );
  }
}

export default BodySurveyView;