import React, { useEffect, useState } from 'react'
import ImageMarker, { Marker } from 'react-image-marker';

import humanImage from '../../Assets/human_body_3d.jpg';
import './PatientImageMarker.css'
import Rating from './Rating';

type Props = {}

const ViewPatientImageMarker = (props: Props) => {
  const saved = JSON.parse(localStorage.getItem('entry') || '{}');
  return (
      <div className='image-marker-div'>
      <div className='entry-div'>
        <span className='sub-header'>How much pain?</span>
            {saved.entries?.map((entry: any, index: number) => (
              <div className='ratingResult' key={index}>
                <span className='image-marker__marker--default'>{entry.index}</span>
                <Rating index={entry.index} defaultValue={entry.severity} onUpdate={() => {}} disabled/>
              </div>
            ))}
          </div>
          <div className='marker-div'>
              <ImageMarker src={humanImage} markers={saved.markers ?? []} />
          </div>
    </div>
  )
}

export default ViewPatientImageMarker;