import * as React from 'react';
import './carInformation.component.scss';
import i18next from 'i18next';
import {
  Popover, ButtonToolbar, OverlayTrigger, Button, Container, Row,
} from 'react-bootstrap';


const subscribe = require('./../../../../../../src/statics/icons/info.svg');
const calendarIcon = require('./../../../../../../src/statics/icons/icon-delivery-date.svg');

interface IProps {
  carDetail: any,
}

interface State {
  date: string,
  thereIsDate: boolean,
}

class CarInformationComponent extends React.Component<IProps, State> {
  state = {
    date: '',
    thereIsDate: false,
  }

  componentWillMount() {
    const { carDetail } = this.props;
    if (carDetail && carDetail.deliveryDate) {
      const options = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      };
      const arrDate = carDetail.deliveryDate.split('.');
      const event = new Date(Date.UTC(arrDate[2], (arrDate[1]) - 1, arrDate[0], 0, 0, 0));
      const date = event.toLocaleDateString('de-DE', options);

      this.setState({
        date,
        thereIsDate: true,
      })
    }
  }

  render() {
    const { carDetail } = this.props;
    const regExp = new RegExp(/Spain/gi);
    const { date, thereIsDate } = this.state;
    let dateInTooltip = null;

    if (thereIsDate) {
      dateInTooltip = (
        <div>
          <div className="calender">
            <img src={calendarIcon} alt="Calendar" />
            <h2>Lieferdatum</h2>
          </div>
          <h3>{date}</h3>
        </div>
      )
    }
    return (
      <ButtonToolbar id="tooltip" className="ioutline">
        <OverlayTrigger
          trigger="click"
          rootClose
          key="bottom"
          placement="bottom"
          overlay={(
            <Popover id="ipopover-positioned-bottom" className="information">
              <Container fluid>
                <Row className="row-top-icontainer">
                  <div>
                    <h2>Modell:</h2>
                    <h3>{carDetail ? carDetail.model : ''}</h3>
                  </div>
                  <div>
                    <h2>Herkunft:</h2>
                    <h3>{carDetail ? carDetail.origin.replace(regExp, i18next.t('countries.spain')) : ''}</h3>
                  </div>
                  <div>
                    <h2>Zielort:</h2>
                    <h3>{carDetail ? carDetail.destination : ''}</h3>
                  </div>
                </Row>
                <Row className="row-bottom-icontainer">
                  {dateInTooltip}
                </Row>
              </Container>
            </Popover>
          )}
        >
          <Button className="button-subscribe"><img src={subscribe} className="info-button" alt="subscribe" /></Button>
        </OverlayTrigger>
      </ButtonToolbar>
    );
  }
}

export default CarInformationComponent;