focalxaiinspection/src/lib/Components/SelectPartHighLevel/SelectPartHighLevel.js

Focalx AI Inspection

/* eslint-disable no-script-url */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useEffect, useState } from 'react';
import './SelectPartHighLevel.scss';

/*import leftPos from '../../jsonFiles/A_zone/position/left.json'*/
import { Link, useNavigate } from 'react-router-dom';
let getDamageData;

const SelectPartHighLevel = () => {
    const navigate = useNavigate();
    const [damageVal, setDamageVal] = useState("");
    const [damageLocation, setDamageLocation] = useState([]);
    /*const damageLocation = leftPos.frames.map((item, index) => (
        <div key={index} className="custom-radio">
            <input onChange={(e) => handleClick(e, item.filename)} type="radio" id={item.category} name="damage-location" value={item.category} />
            <label htmlFor={item.category}>{item.name}</label>
        </div>
    ));*/

    const handleClick = (e, imgName) => {
        setDamageVal(e.target.value);
        imagePath(imgName, getDamageData.position.toLowerCase());
        getDamageData.zone = e.target.value;
        sessionStorage.setItem("manualDamage", JSON.stringify(getDamageData));
    }
    const imagePath = (imgPath, folderPath) => {
        let img = document.createElement('img');
        img.src = require(`../../Assets/images/carPosition/${folderPath}/${imgPath}.svg`);
        document.getElementById('carDamageimg').innerHTML = "";
        document.getElementById('carDamageimg').appendChild(img);
    }

    useEffect(() => {
        getDamageData = JSON.parse(sessionStorage.getItem("manualDamage") || {});
        renderImg(getDamageData.img);
        imagePath(`${getDamageData.position.toLowerCase()}-blank`, getDamageData.position.toLowerCase());
        if (getDamageData.position && getDamageData.catZone) {
            const jsonData = require(`../../jsonFiles/${getDamageData.catZone}/position/${getDamageData.position.toLowerCase()}.json`);
            //console.log("jsonData", jsonData);
            setDamageLocation(jsonData.frames.map((item, index) => (
                <div key={index} className="custom-radio">
                    <input onChange={(e) => handleClick(e, item.filename)} type="radio" id={item.category} name="damage-location" value={item.category} />
                    <label htmlFor={item.category}>{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(damageVal && damageVal !== ""){
            navigate("/select-part-detail-level");
        }else{
            alert("Kindly Select the Option.")
        }
    }

    return (
        <>
            <div className="select-postion-section select-part-high-level">
            <div className='damage-preview-container'>
                <img id='damagePrevieImg' alt='' />
            </div>
                <div className="container">                    
                    <div style={{ paddingBottom: "100px" }} className="select-position-wrap">
                        <label id="carDamageimg" className="damge-car-position" for="front-postion">
                            <img src={require('../../Assets/images/carPosition/left/left-blank.svg').default} alt="" />
                        </label>
                        <div className="custom-radio-section custom-radio-inline-section left-align-radio">
                            {damageLocation}
                        </div>
                    </div>
                </div>
            </div>

            <div className="action-btn-wrap bottom-action-btns">
                <Link to="/select-car-position" 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 SelectPartHighLevel;