import React from 'react';
import PropTypes from 'prop-types';
import {
  Button,
} from '@bufferapp/components';
import ModalActionCreators from '../__legacy-buffer-web-shared-components__/modal/actionCreators';

const openModal = (video, draftId) => {
  ModalActionCreators.openModal('InstagramThumbnailEditor', {
    video, draftId,
  });
};

const wrapperStyle = {
  padding: '0px 8px 8px',
};

const InstagramThumbnailButton = ({ video, draftId }) => (
  <div style={wrapperStyle}>
    <Button
      onClick={(e) => {
        e.preventDefault();
        openModal(video, draftId);
      }}
    > Edit Thumbnail
    </Button>
  </div>
);

InstagramThumbnailButton.propTypes = {
  video: PropTypes.object,
  draftId: PropTypes.string.isRequired,
};

InstagramThumbnailButton.defaultProps = {
  video: {},
};

export default InstagramThumbnailButton;
