import React, { Component } from "react";
import { getCarBrands } from "../../services/carBrand";
import { getCarModels } from "../../services/carModelService";
import { getCompanies } from "../../services/companyService";
import Input from "../component/Input";
import { addCar } from "../../services/carService";
import alertify from "alertifyjs";
import { Link } from "react-router-dom";

export default class CarAdd extends Component {
  state = {
    carKm: null,
    carInsuranceDate: null,
    carLicencePlate: null,
    carStatus: null,
    carActive: null,
    carIsCarForRent: null,
    carModelId: null,
    carBrandId: null,
    companyId: null,
    pendingApicall: false, //tek request atabilmek için ekledim.
    errors: {},
    carBrands: [],
    carModels: [],
    companies: [],
  };

  componentDidMount() {
    getCarBrands().then((response) => {
      this.setState({
        carBrands: response.data.data,
      });
    });
    getCarModels().then((response) => {
      this.setState({
        carModels: response.data.data,
      });
    });
    getCompanies().then((response) => {
      this.setState({
        companies: response.data.data,
      });
    });
  }

  onChange = (event) => {
    const { name, value } = event.target;
    const errors = { ...this.state.errors }; //inputa kullanıcı herhangi bir giriş yapmaya başlayınca hata mesajının silinmesi için
    errors[name] = undefined; //inputa kullanıcı herhangi bir giriş yapmaya başlayınca hata mesajının silinmesi için
    this.setState({
      [name]: value,
      errors,
    });
  };

  onClickSignUp = async (event) => {
    event.preventDefault();
    const {
      carKm,
      carInsuranceDate,
      carLicencePlate,
      carStatus,
      carActive,
      carIsCarForRent,
      carBrandId,
      carModelId,
      companyId,
    } = this.state;
    const body = {
      carKm,
      carInsuranceDate,
      carLicencePlate,
      carStatus: true,
      carActive: true,
      carIsCarForRent,
      carModelId,
      carBrandId,
      companyId,
    };
    this.setState({ pendingApicall: true });

    try {
      const response = await addCar(body);
    } catch (error) {
      if (error.response.data.validationErrors) {
        this.setState({ errors: error.response.data.validationErrors });
        console.log(error);
      }
    }
    this.setState({ pendingApicall: false });
  };

  render() {
    const { errors } = this.state;
    const {
      carKm,
      carInsuranceDate,
      carLicencePlate,
      carStatus,
      carActive,
      carIsCarForRent,
      carBrandId,
      carModelId,
      companyId,
    } = errors;

    return (
      <div className="container mt-4">
        <h1 className="text-center">Araç Ekle</h1>
        <form>
          <Input
            label="Araç Plaka"
            name="carLicencePlate"
            onChange={this.onChange}
            error={carLicencePlate}
          />

          <div className="mt-2">
            <label>Marka</label>
          </div>
          <div className="input-group">
            <select
              className="form-select"
              name="carBrandId"
              onChange={this.onChange}
              aria-label="Example select with button addon"
            >
              <option selected>Seçiniz...</option>
              {this.state.carBrands.map((carBrand) => {
                return (
                  <option value={carBrand.carBrandId}>
                    {carBrand.carBrand}
                  </option>
                );
              })}
            </select>
          </div>

          <div className="mt-2">
            <label>Model</label>
          </div>
          <div className="input-group">
            <select
              className="form-select"
              name="carModelId"
              onChange={this.onChange}
              aria-label="Example select with button addon"
            >
              <option selected>Seçiniz...</option>
              {this.state.carModels.map((carModel) => {
                return (
                  <option value={carModel.carModelId}>
                    {carModel.carModel}
                  </option>
                );
              })}
            </select>
          </div>

          <div className="mt-2">
            <label>Şirket</label>
          </div>
          <div className="input-group">
            <select
              className="form-select"
              name="companyId"
              onChange={this.onChange}
              aria-label="Example select with button addon"
            >
              <option selected>Seçiniz...</option>
              {this.state.companies.map((company) => {
                return (
                  <option value={company.companyId}>
                    {company.companyName}
                  </option>
                );
              })}
            </select>
          </div>

          <Input
            label="Sigorta/Kasko Tarih"
            name="carInsuranceDate"
            onChange={this.onChange}
            error={carInsuranceDate}
            type="date"
          />

          <Input
            label="Araç Km"
            name="carKm"
            onChange={this.onChange}
            error={carKm}
          />

          <div className="mt-2">
            <label>Araç Kiralık M?</label>
          </div>
          <div className="input-group">
            <select
              className="form-select"
              name="carIsCarForRent"
              onChange={this.onChange}
              aria-label="Example select with button addon"
            >
              <option selected>Seçiniz...</option>
              <option value={true}>Evet</option>
              <option value={false}>Hayır</option>
              );
            </select>
          </div>

          <div className="text-center mt-3">
            <Link to="/cars">
              <button
                disabled={this.state.pendingApicall}
                className="btn btn-primary"
                onClick={this.onClickSignUp}
              >
                Kaydet
              </button>
            </Link>
          </div>
        </form>
      </div>
    );
  }
}