import React, { useState, useEffect, state } from "react";
import { Link } from "react-router-dom";
import { carProducerFetched, carModelFetched, fuelTypeFetched } from "../../actions";
import { connect } from "react-redux";

const MainInformation = ({props, onChangeProducer, onChangeCarModel, onChangeFuelType, onChangeShortDescription,onChangePhoneNumber,onChangeYearProduction, state }) => {


  const [carProducerList, setCarProducerList] = useState(null);
  const [carModelList, setCarModelList] = useState(null);
  const [fuelTypeList, setFuelTypeList] = useState(null);
  const [yearProduction, setYearProduction] = useState(null);

  const getCarProducerList = async () => {
    const res = await fetch("https://localhost:44394/api/CarProducent");
    const carProducer = await res.json();
    setCarProducerList(carProducer);
  }

  const getCarModelList = async (id) => {
    const res = await fetch("https://localhost:44394/api/CarProducent/" + id);
    const carModel = await res.json();
    setCarModelList(carModel.carModelViewModels);
  }

  const getFuelTypeList = async () => {
    const res = await fetch("https://localhost:44394/api/FuelType/");
    const fuelType = await res.json();
    setFuelTypeList(fuelType);

  }
  const startup = () => {
    let date = new Date();
    let yearProductionTmp = [];
    for(let x = date.getFullYear(); x >= 1900; --x){
        yearProductionTmp.push(x);
    }
    setYearProduction(yearProductionTmp);
    console.log(yearProduction);
  }
  useEffect(() => {
    startup();
    getCarProducerList();
    getFuelTypeList();
  },[props])
  console.log(state)
  return (

    <div>

      <select value={state.carProducerValue} name="carProducer" onChange={x => { onChangeProducer(x.target.value); getCarModelList(state.carProducerValue) }}>
        <option value="" disabled >Producent</option>
        {carProducerList && carProducerList.length > 0 && carProducerList.map(x => (
          <option key={x.idString} value={x.idString}>{x.producentName}</option>
        ))}
      </select>

      <select value={state.carModelValue} onChange={x => onChangeCarModel(x.target.value)} name="carModel"  >
        <option value="" disabled >Model</option>
        {carModelList && carModelList.length > 0 && carModelList.map(x => (
          <option key={x.idString} value={x.idString}>{x.modelName} </option>
        ))}
      </select>
      <div>
        Paliwo:
        <div>
          <fieldset value={state.fuelTypeValue} onChange={e => onChangeFuelType(e.target.value)}>
            {
              fuelTypeList && fuelTypeList.length > 0 && fuelTypeList.map(x => (
                <label key={x.idString}>
                  <input type="radio" key={x.idString} value={x.idString} name="fuelType" /> {x.fuelName} </label>
              ))

            }
          </fieldset>
        </div>
        <div>
          Krótki opis:
                <div>
            <input id="shortDescription" value={state.shortDescriptionValue} onChange={x => onChangeShortDescription(x.target.value)} type="text" min="6" maxLength="60" />
          </div>
          Numer Telefonu
          <div>
            <input id="phoneNumber" value={state.phoneNumber} onChange={x => onChangePhoneNumber(x.target.value)} type="text"  />
          </div>
          Rok Produkcji
          <div>
              <select value={state.yearProductionValue} onChange={x => onChangeYearProduction(x.target.value)} name="yearProduction">
               <option value="" disabled >Wybierz</option>
                {
                  yearProduction && yearProduction.map(x => (

                    <option  key={x} value={x}>{x}</option>
                  ))
                }
              </select>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainInformation;