import React from 'react';
import './App.css';

class Vehicle {
  make: string;
  model: string;
  year: number;
  image: string;
  description: string;
  seats: number;
  driveStyle: string;
  constructor(make: string, model: string, year: number, image: string, description: string, seats: number, driveStyle: string) {
    this.make = make;
    this.model = model;
    this.year = year;
    this.image = image;
    this.description = description;
    this.seats = seats;
    this.driveStyle = driveStyle;
  }

  getCarInfo() {
    return [this.make, this.model, this.year, this.image, this.description, this.seats, this.driveStyle];
  }
}
const DogCarDesc = 'This is a wonderful new car by Mitsubishi\, it sports a \.1 horsepower engine as well as a fur coating\. No dogs were harmed in the creation of this masterpiece of both art and engineering\. This is a true feat of humanity you are seeing right now\.';
const CatCarDesc = 'A car as ferocious as a feline, designed by designers, so you know it\'s good';
const DogCar = new Vehicle('Mitsubishi', 'Dog Petter Max', 2017, './img/mitsubishidog.jpg', DogCarDesc, 4, 'FWD');
const CatCar = new Vehicle('Mazda', 'Cat Scratch Supreme', 2012, './img/catcar.jfif', CatCarDesc, 8, 'AWD');
console.log(DogCar.getCarInfo());


let cars = new Map();
cars.set('DogCar', DogCar.getCarInfo());
cars.set('CatCar', CatCar.getCarInfo());

class carTable {

  createTable = () => {
    let table = [];

    for (let car of cars.entries()) {
      console.log(car);
      table.push(
        <div className="VehicleListing" >
          <div className="HiddenDiv">
            <div className="ListContainer">
              <p className="ListHeader">
                {car[1][2]} {car[1][0]} {car[1][1]}
              </p>
              <img src={car[1][3]} className="ListPicture"></img>
              <div className="HiddenP">
                <p className="HiddenInfo">Seats: {car[1][5]}</p>
                <p className="HiddenInfo">Driving Style: {car[1][6]}</p>
              </div>
              <p className="ListDescription">{car[1][4]}</p>
            </div>
          </div>
        </div>

      )
    }
    return table
  }
}

const tableto = new carTable();
const finalCars = tableto.createTable();
console.log(finalCars);

const App: React.FC = () => {

  return (
    <div className="App">
      <div className="Welcome">
        <h3 className="Title">Welcome to Vehicles, we hope you find this helpful in your search for a new car!</h3>
      </div>
      <hr />
      {finalCars}
    </div>

  );
}

export default App;