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'>{index + 1}</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;