focalxaiinspection/src/lib/Pages/DamageCategoryPage/DamageCategoryPage.js

Focalx AI Inspection

/* eslint-disable no-script-url */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useEffect, useState } from 'react';
import './DamageCategoryPage.scss';
import { Heading } from './../../Components/Heading';
//import GetBaseURL from '../../services/Api/base';
import { Link, useNavigate } from 'react-router-dom';
const FormData = require('form-data');

const damageCategory = [
  {
    id: "k1",
    name: "K1",
  },
  {
    id: "k2",
    name: "K2",
  },
  {
    id: "k3",
    name: "K3",
  },
  {
    id: "k4",
    name: "K4",
  },
  {
    id: "k5",
    name: "K5",
  }
];
let getDamageData;

const DamageCategoryPage = () => {
  const navigate = useNavigate();
  //const baseUrl = GetBaseURL();
  const car_info = JSON.parse(sessionStorage.getItem('carInformation'));
  const baseUrl = car_info.baseUrl;
  const schemaName = sessionStorage.getItem('schema_name');
  const inspeectionId = sessionStorage.getItem('inspection_id');

  const damageAPIURL = `https://${schemaName}.${baseUrl}/api/v1/service/inspections/${inspeectionId}/damage/`;
  const accessToken = sessionStorage.getItem('token');

  const [damageCatVal, setDamageCatVal] = useState("");
  const [loading, setLoading] = useState(false);
  const damageCategoryComponents = damageCategory.map((item, index) => (
    <div key={index} className="custom-radio">
      <input onChange={(e) => handleClick(e)} type="radio" id={item.id} name="damage-type" value={item.name} />
      <label htmlFor={item.id}>{item.name}</label>
    </div>
  ));

  const handleClick = (e) => {
    setDamageCatVal(e.target.value);
    getDamageData.category = e.target.value;
    sessionStorage.setItem("manualDamage", JSON.stringify(getDamageData));
  }

  useEffect(() => {
    getDamageData = JSON.parse(sessionStorage.getItem("manualDamage") || {});
    renderImg(getDamageData.img)
  }, []);

  const renderImg = async (base64Img) => {
    const blob = await (await fetch(base64Img)).blob();
    const imageUrl = window.URL.createObjectURL(blob);
    document.getElementById("damagePrevieImg").src = imageUrl;
  }

  const mapPosition = (zone) => {
    if (zone === "AA101" || zone === "AA102" || zone === "AA103" || zone === "AA104" || zone === "AA105" || zone === "AA11" || zone === "AA12" || zone === "AA13") {
      return "left-front"
    }

    if (zone === "AA81" || zone === "AA82" || zone === "AA83" || zone === "AA91" || zone === "AA92" || zone === "AA93" || zone === "AA94") {
      return "left-rear"
    }

    if (zone === "BB21" || zone === "BB22" || zone === "BB23" || zone === "BB25") {
      return "front"
    }

    if (zone === "DD71" || zone === "DD72" || zone === "DD73" || zone === "DD75") {
      return "rear"
    }

    if (zone === "BB24" || zone === "DD74") {
      return "rear"
    }

    if (zone === "CC31" || zone === "CC32" || zone === "CC33" || zone === "CC41" || zone === "CC42" || zone === "CC43" || zone === "CC44" || zone === "CC45") {
      return "right-front"
    }

    if (zone === "CC51" || zone === "CC52" || zone === "CC53" || zone === "CC54" || zone === "CC61" || zone === "CC62" || zone === "CC63") {

      return "right-rear"
    }

    if (zone === "EE121" || zone === "EE123") {
      return "dashboard"
    }

    if (zone === "EE122" || zone === "FF131" || zone === "FF132" || zone === "FF133") {
      return "driver-seat"
    }

    if (zone === "FF161" || zone === "FF162" || zone === "FF163") {
      return "front-passenger"
    }
    if (zone === "GG141" || zone === "GG142") {
      return "left-rear-passenger"
    }

    if (zone === "GG143" || zone === "GG144") {
      return "right-rear-passenger"
    }

    if (zone === "HH151" || zone === "HH152" || zone === "HH153" || zone === "HH154") {
      return "trunk"
    }

    return ""
  }

  const nextStep = async () => {
    if (damageCatVal && damageCatVal !== "") {
      setLoading(true);
      const getDamageData = JSON.parse(sessionStorage.getItem("manualDamage"));
      const blob = await (await fetch(getDamageData.img)).blob();

      let formdata = new FormData();
      formdata.append("image", blob, "test1.jpg");
      formdata.append("position", mapPosition(getDamageData.zone));
      formdata.append("zone", getDamageData.zone);
      formdata.append("part", getDamageData.part.toLowerCase());
      formdata.append("damage_type", getDamageData.type.toLowerCase());
      formdata.append("category", getDamageData.category.toLowerCase());

      const requestOptions = {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${accessToken}`
        },
        body: formdata,
        redirect: 'follow'
      };

      fetch(damageAPIURL, requestOptions)
        .then(function (response) {
          response.json().then(data => {
            setLoading(false);
            if (response.status === 200) {
              sessionStorage.removeItem("manualDamage");
              navigate('/damage-report');
            } else {
              alert(data.message);
            }
          });
        })
        .catch(error => {
          setLoading(false);
          console.log('error', error)
        });
    } else {
      alert("Kindly Select the Option.")
    }
  }

  return (
    <>
      {!loading &&
      <main>
        <Heading title="Damage Category" />
        <div className="select-postion-section">
        <div className='damage-preview-container'>
                <img id='damagePrevieImg' alt='' />
            </div>
          <div className="container">
            <div style={{ paddingBottom: "100px" }} className="select-position-wrap">
              <div className="custom-radio-section custom-radio-inline-section damage-category-radio">
                {damageCategoryComponents}
              </div>
            </div>
          </div>
        </div>

        <div className="action-btn-wrap bottom-action-btns">
          <Link to="/damage-type" className="custom-secondary-outline-button left-side-btn justify-content-center">Back</Link>
          <a onClick={() => nextStep()} className="custom-primary-button right-side-btn justify-content-center">Submit</a>
        </div>
      </main>
      }
      {loading &&
        <div className="lds-roller-overlay">
        <div className="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
        </div> 
      }

    </>
  )
};

export default DamageCategoryPage;