focalxaiinspection/src/lib/Components/SelectPartDetailLevel/SelectPartDetailLevel.js

Focalx AI Inspection

/* eslint-disable no-script-url */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useEffect, useState } from 'react';
import './SelectPartDetailLevel.scss';
/*import carPartJson from '../../jsonFiles/A_zone/AA11/AA11.json'*/
import { Link, useNavigate } from 'react-router-dom';
let getDamageData;

const SelectPartDetailLevel = () => {
    const navigate = useNavigate();
    const [carPartVal, setCarPartVal] = useState("");
    const [carPart1, setCarPart1] = useState([]);

   /*const carPart = carPartJson.frames.map((item, index) => (
        <div key={index} className="custom-radio">
            <input onChange={(e) => handleClick(e, item.filename)} type="radio" id={item.uuid} name="car-part" value={item.part} />
            <label htmlFor={item.uuid}>{item.name}</label>
        </div>
    ));*/

    useEffect(() => {
        getDamageData = JSON.parse(sessionStorage.getItem("manualDamage"));
        if (getDamageData) {
            renderImg(getDamageData.img);
            if (getDamageData.zone) {
                imagePath(`${getDamageData.zone}-blank`, getDamageData.zone);
                const jsonData = require(`../../jsonFiles/${getDamageData.catZone}/${getDamageData.zone}/${getDamageData.zone}.json`);
                //console.log("jsonData", jsonData);
                setCarPart1(jsonData.frames.map((item, index) => (
                    <div key={index} className="custom-radio">
                        <input onChange={(e) => handleClick(e, item.filename, getDamageData.zone)} type="radio" id={item.uuid} name="car-part" value={item.part} />
                        <label htmlFor={item.uuid}>{item.name}</label>
                    </div>
                )))
            }
        }
    }, []);

    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 (carPartVal && carPartVal !== "") {
            navigate("/damage-type");
        } else {
            alert("Kindly Select the Option.")
        }
    }

    const handleClick = (e, imgName, zone) => {
        const value = e.target.value;
        setCarPartVal(value);
        imagePath(imgName, zone);
        getDamageData.part = value;
        sessionStorage.setItem("manualDamage", JSON.stringify(getDamageData));
    }
    const imagePath = (imgPath, zone) => {
        let img = document.createElement('img');
        //console.log(`../../Assets/images/carPosition/${zone}/${imgPath}.svg`);
        img.src = require(`../../Assets/images/carPosition/${zone}/${imgPath}.svg`);
        document.getElementById('carPartimg').innerHTML = "";
        document.getElementById('carPartimg').appendChild(img);
    }
    return (
        <>
            <div className="select-postion-section select-part-detail-level">
            <div className='damage-preview-container'>
                <img id='damagePrevieImg' alt='' />
            </div>
                <div className="container">
                    <div style={{ paddingBottom: "100px" }} className="select-position-wrap">
                        <label id="carPartimg" className="damge-car-position" for="front-postion">
                            {/*<img src={require('../../Assets/images/carPosition/AA11/AA11-blank.svg').default} alt="" />*/}
                        </label>
                        <div className="custom-radio-section custom-radio-inline-section radio-align-left">
                            {carPart1}
                        </div>
                    </div>
                </div>
            </div>

            <div className="action-btn-wrap bottom-action-btns">
                <Link to="/select-part-high-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>

        </>
    )
};

export default SelectPartDetailLevel;