import React, { useEffect } from 'react'
//import * as filestack from 'filestack-js';
import { Button } from 'reactstrap';
import { useTranslation } from 'react-i18next';
import JKModalDialog from '../common/JKModalDialog';
import JKProfileAvatar from './JKProfileAvatar';
import { useAuth } from '../../context/UserAuth';
import { getUserDetail } from '../../helpers/rest';

const JKProfileAvatarUpload = ({show, toggle}) => {
  const { t } = useTranslation('profile');
  const { currentUser } = useAuth();

  useEffect(() => {
    if(currentUser) {
      console.log(currentUser.photo_url);
      // getUserDetail(currentUser.id).then(response => {
      //   console.log('_userDetails', response);
      // });
    }
  }, [currentUser]);

  const openFilePicker = () => {
    // const client = filestack.init(window.gon.fp_apikey);
    // client.picker({
    //   accept: 'image/*',
    //   maxFiles: 1,
    //   onFileUploadFinished: (response) => {
    //     console.log(response);
    //   }
    // }).open();
  }
  return (
    <JKModalDialog
    show={show}
    onToggle={toggle}
    title={t('photo_modal.title', { ns: 'profile' })}
    showFooter={true}
  >
    <div className='d-flex flex-column'>
      <div className='d-flex justify-content-center'>
        <JKProfileAvatar src={currentUser.photo_url} size="5xl" />
      </div>

      <div className="d-flex justify-content-center mt-2">
        <Button color="primary"  className="ml-2" onClick={openFilePicker}>
          {t('photo_modal.upload', { ns: 'profile' })}
        </Button>
        <Button color="secondary" outline className="ml-2" onClick={() => {}}>
          {t('photo_modal.delete', { ns: 'profile' })}
        </Button>
      </div>
    </div>
  </JKModalDialog>
  )
}

export default JKProfileAvatarUpload