import React from 'react';
import PropTypes from 'prop-types';
import { FormLabel, FormTextInput } from '../../components/style/export';
import PropertyStyle from './shared-property-style';
import { MdFileUpload } from 'react-icons/md';
import {browserImageUpload } from '../../utils/browser';
import { FileUploader } from '../../utils/uploadApi';


export default function PropertyImage({value, onUpdate, configs, sourceElement, internalState, state}) {

  let loadFloorPlanFromFile = (event)=>{
  
    event.stopPropagation();
    browserImageUpload().then((data) => {
      // const extname = path.resolve( data );
      // if(data.type.includes('image'))
      //   update(data.name)     

      console.log("dadta : ", data)

      FileUploader.uploadFile('', data, (res)=>{
        console.log("response : ", res)
      })
    })
  }

  let update = (val) => {

    if (configs.hook) {
      return configs.hook(val, sourceElement, internalState, state).then(_val => {
        return onUpdate(_val);
      });
    }

    return onUpdate(val);
  };

  return (
    <table className="PropertyImage" style={PropertyStyle.tableStyle}>
      <tbody>
        <tr>
          <td style={PropertyStyle.firstTdStyle}><FormLabel>{configs.label}</FormLabel></td>        
          <td>
            <FormTextInput
              value={value}
              onChange={event => update(event.target.value)} 
              />
          </td>
          <td>
            <button onClick={loadFloorPlanFromFile} style={{marginTop: 6}}><MdFileUpload/></button>
          </td>
        </tr>
      </tbody>
    </table>
  );
}

PropertyImage.propTypes = {
  value: PropTypes.any.isRequired,
  onUpdate: PropTypes.func.isRequired,
  configs: PropTypes.object.isRequired,
  sourceElement: PropTypes.object,
  internalState: PropTypes.object,
  state: PropTypes.object.isRequired
};
