focalxaiinspection/src/lib/Pages/DamageTypePage/DamageTypePage.js

Focalx AI Inspection

/* eslint-disable no-script-url */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useEffect, useState } from 'react';
import './DamageTypePage.scss';
import { DamageType } from '../../Components/DamageType';
import { Heading } from './../../Components/Heading';
import { Link, useNavigate } from 'react-router-dom';

const damageType = [{
  id: "scratch",
  filename: "scratch1",
  name: "Scratch",
}, {
  id: "dent",
  filename: "dent1",
  name: "Dent",
}, {
  id: "stone-chip",
  filename: "stone-chip1",
  name: "Stone blow",
}, {
  id: "tear",
  filename: "tear1",
  name: "Tear",
}];
let getDamageData;

const DamageTypePage = () => {
  const navigate = useNavigate();
  const [damageTypeVal, setDamageTypeVal] = useState("");
  const damageTypeComponents = damageType.map((item, index) => (
    <div key={index} className="custom-radio">
      <label className="position" htmlFor={item.id}>
        <img src={require("../../Assets/images/" + item.filename + ".png")} alt={item.name} />
      </label>
      <input onChange={(e) => handleClick(e)} type="radio" id={item.id} name="damage-type" value={item.id} />
      <label htmlFor={item.id}>{item.name}</label>
    </div>
  ));

  const handleClick = (e) => {
    setDamageTypeVal(e.target.value);
    getDamageData.type = 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 nextStep = () => {
    if (damageTypeVal && damageTypeVal !== "") {
      navigate("/damage-category");
    } else {
      alert("Kindly Select the Option.")
    }
  }

  return (
    <>
      <main>
        <Heading title="Damage Type" />
        {/*<div className='damage-report-section'>
              <DamageType />
        </div>*/}
        <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">
                {damageTypeComponents}
              </div>
            </div>
          </div>
        </div>

        <div className="action-btn-wrap bottom-action-btns">
          <Link to="/select-part-detail-level" 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">Next</a>
        </div>
      </main>
    </>
  )
};

export default DamageTypePage;