import React from 'react';

import Icon from '../Icon';
import Button from '../Button';
import { uploadFile } from '../../helpers/utility';

import { ContentWrapper } from './styled';

type Props = {
  t: (key: string) => string;
  onChange: (data: string) => void;
};

const ImageSelector: React.FC<Props> = ({
  t,
  onChange,
}: Props): React.ReactElement => {
  const handleClick = (): void => {
    uploadFile('.png,.jpg,.jpeg,.svg').then(urlData => {
      onChange(urlData);
    });
  };

  return (
    <ContentWrapper>
      <Icon glyph="add-image" />
      <Button
        appearance="link"
        style={{ marginLeft: '10px' }}
        onClick={handleClick}
      >
        {t('selectImage')}
      </Button>
    </ContentWrapper>
  );
};

export default ImageSelector;